Comment définir l'arrière-plan de l'image avec CSS-tutoriel CSS-php.cn

Comment définir l'arrière-plan de l'image avec CSS

青灯夜游

Libérer： 2023-01-05 16:10:09

original

32620 Les gens l'ont consulté

Comment définir l'arrière-plan de l'image avec CSS : 1. Utilisez l'attribut background-image, la syntaxe "background-image:url('image address');" 2. Utilisez l'attribut background, la syntaxe "background:url('Adresse de l'image');".

Comment définir l'arrière-plan de l'image avec CSS

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

En CSS, vous pouvez utiliser l'attribut background-image ou l'attribut background pour définir l'arrière-plan de l'image.

Attribut CSS background-image

L'attribut background-image définit l'image d'arrière-plan d'un élément. 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.

Valeur de l'attribut :

url('URL') Chemin pointant vers l'image.
aucun Valeur par défaut. Aucune image d'arrière-plan n'est affichée.
inherit spécifie que le paramètre de la propriété background-image doit être hérité de l'élément parent.

Exemple :

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <title>css设置背景图片</title>
        <style>
            body {
                background-image: url(&#39;img/1.jpg&#39;);
            }
        </style>
    </head>
 
    <body>
 
    </body>
 
</html>

Copier après la connexion

Rendu :

Comment définir larrière-plan de limage avec CSS

attribut d'arrière-plan CSS

L'attribut background est une propriété qui définit spécifiquement l'arrière-plan. Il s'agit d'une propriété abrégée qui peut définir toutes les propriétés d'arrière-plan dans une seule instruction. (Partage vidéo d'apprentissage : tutoriel vidéo CSS)

Attributs pouvant être définis par arrière-plan :

background-color : Spécifie la couleur d'arrière-plan à être utilisé.
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.

On peut voir que l'attribut background-image sert à définir l'attribut d'image d'arrière-plan pour la page html. Jetons un coup d'œil à son utilisation

1	`background-image:url(1.jpg);`

Copier après la connexion

C'est. donné dans url() En spécifiant le chemin de l'image, vous pouvez définir une image d'arrière-plan pour la boîte div ; cela semble simple, mais une chose à noter est que la boîte de définition de l'image d'arrière-plan doit avoir une largeur et une hauteur substantielles, donc que l'image d'arrière-plan puisse être affichée sur l'écran.

Si définir les attributs d'arrière-plan ci-dessus un par un semble fastidieux, en fait, certains attributs peuvent être définis ensemble. Une telle expression d'arrière-plan CSS peut enregistrer et optimiser le code du fichier CSS. Exemple :

1	`background:url(bgimg.gif) no-repeat 5px 5px;`

Copier après la connexion

Explication comme indiqué ci-dessous :

Comment définir larrière-plan de limage avec CSS

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(img/1.jpg);
                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>