Comment introduire des fichiers image en CSS-Questions et réponses frontales-php.cn

Comment introduire des fichiers image en CSS

藏色散人

Libérer： 2023-01-04 09:38:19

original

11470 Les gens l'ont consulté

Comment introduire des fichiers image en CSS : 1. Importez via la méthode "background-image:url (adresse de l'image)" 2. Utilisez la méthode "background:url (adresse de l'image)" pour importer l'image. et affichez-le uniquement sur la page Web.

Comment introduire des fichiers image en CSS

L'environnement d'exploitation de ce tutoriel : ordinateur Dell G3, système Windows 7, version HTML5&&CSS3.

Recommandé : "Tutoriel vidéo CSS"

Css importe des fichiers image

En CSS, vous pouvez utiliser background-image :url (l'adresse de votre image) ou background:url (l'adresse de votre image) pour introduire des images et les afficher sur la page Web.

<div id="bgimg"></div>
#bgimg {
background: #333 url(图片路径) center center no-repeat;
}

Copier après la connexion

Le premier paramètre est la couleur d'arrière-plan de la couche inférieure de l'image. Le deuxième paramètre est le chemin de l'image. Le troisième paramètre est la position relative du haut et du bas de l'image (les autres paramètres sont à gauche et). droite). Le quatrième paramètre est l'image. La position relative de la gauche et de la droite (haut, bas), le cinquième paramètre, la répétition de l'image (autres paramètres répétition, répétition-x, répétition-y).

Exemple :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>背景图片设置</title>
        <style>
            .demo{
                position:fixed;
                top: 0;
                left: 0;
                width:100%;
                height:100%;
                min-width: 1000px;
                z-index:-10;
                zoom: 1;
                background-color: #fff;
                background: url(1.png);
                background-repeat: no-repeat;
                background-size: cover;
                -webkit-background-size: cover;
                -o-background-size: cover;
                background-position: center 0;
            }
        </style>
    </head>
    <body>
        <div class="demo"></div>
    </body>
</html>

Copier après la connexion

Rendu :

Comment introduire des fichiers image en CSS

Explication :

L'attribut background est un attribut abrégé qui peut être utilisé dans Définir toutes les propriétés d’arrière-plan dans une seule instruction.

L'attribut background est une propriété qui définit spécifiquement l'arrière-plan. Vous pouvez définir la couleur ou l'image d'arrière-plan.

Jetons un coup d'œil aux attributs qui peuvent être définis pour l'arrière-plan :

background-color : Spécifie la couleur d'arrière-plan à utiliser.

background-position : Spécifie la position de l'image d'arrière-plan.

background-size : Spécifie la taille de l'image d'arrière-plan.

background-repeat : Spécifie comment répéter l'image d'arrière-plan.

background-origin : Spécifie la zone de positionnement de l'image d'arrière-plan.

background-clip : Spécifie la zone de dessin de l'arrière-plan.

background-attachment : Spécifie si l'image d'arrière-plan est fixe ou défile avec le reste de la page.

background-image : Spécifie l’image d’arrière-plan à utiliser. L'arrière-plan d'un élément

correspond à la taille totale de l'élément, y compris le remplissage et les bordures (mais pas les marges). Par défaut, l'image d'arrière-plan est placée dans le coin supérieur gauche de l'élément et se répète verticalement et horizontalement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!