Maison >interface Web >Questions et réponses frontales >Comment introduire des fichiers image en CSS

Comment introduire des fichiers image en CSS

藏色散人
藏色散人original
2020-12-30 09:47:3611499parcourir

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;
}

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>

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Que signifie Taobao CSS ?Article suivant:Que signifie Taobao CSS ?