Maison > Article > interface Web > Background-image en CSS3 implémente plusieurs images d'arrière-plan (exemple de code)

Background-image en CSS3 implémente plusieurs images d'arrière-plan (exemple de code)

易达original: 2020-06-09 09:51:084867parcourir

Objectifs de cet article :

1. Maîtriser la mise en œuvre de plusieurs arrière-plans d'image de fond

Questions :

1. Pour obtenir les effets suivants, utilisez du DIV pur. +CSS, qui doit être utilisé background-image

Background-image en CSS3 implémente plusieurs images darrière-plan (exemple de code)

Remarques supplémentaires :

1 La largeur totale est de 1000 px et la hauteur est de 300 px. doit être centré.

2. Arrière-plan La largeur et la hauteur de l'image sont toutes deux de 300px

3 Chaque image est présentée comme une image d'arrière-plan

Faisons maintenant l'opération spécifique.

1. Préparez les matériaux : créez le dossier Images du répertoire racine, stockez toutes les images de matériaux pertinentes ici. Les matériaux incluent

Background-image en CSS3 implémente plusieurs images darrière-plan (exemple de code)

2. Créez index.html et écrivez la structure Comment analyser la structure ?

Analyse d'idée :

1. . L'image de fond de chaque div est la même. Il y a 3 photos, mais si vous regardez bien, vous pouvez voir que la position de la deuxième image de fond est différente

2. Chaque div a un titre

D'après l'analyse, nous obtenons le code suivant

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多重背景</title>
    <link rel="stylesheet" href="css/index.css" />
</head>
<body>
    <div class="container">
        <h4>效果1</h4>
        <div class="demo bg1"></div>
        <h4>效果2</h4>
        <div class="demo bg2"></div>
        <h4>效果3</h4>
        <div class="demo bg3"></div>
    </div>
</body>
</html>

3 Écrivez le style, créez un dossier css, créez-y un nouvel index.css, comment écrire le style à l'intérieur, ce qui suit. est l'idée d'analyse

Analyse de réflexion :

1 , .container *

Analyse d'idée

1 Afin de définir les styles communs de tous les éléments. dans le conteneur, nous pouvons écrire ces codes communs dans le style .container *

Ajoutez donc le code suivant à index.css :

.container *{
    padding:0;
    margin:0;
}

2 titre h4

Idée. analyse :

1. Le texte doit être centré, donc le code est text-align: center;,

Ajoutez donc le code suivant à index.css :

h4{
    text-align: center;
}

3.demo

Analyse de l'idée :

1 Selon Il faut connaître la largeur de 1000 et la hauteur de 300, donc le code est de largeur : 1000px. ; hauteur : 300px ; l'image d'arrière-plan n'est pas une mais 3, et elles ne sont pas répétées, donc

image d'arrière-plan : url(images/gtl1 .jpg),

url(images/Background-image en CSS3 implémente plusieurs images darrière-plan (exemple de code)) ),
url(images/Background-image en CSS3 implémente plusieurs images darrière-plan (exemple de code));

background-repeat : pas de répétition, pas de répétition, pas de répétition

Avec bordure, donc bordure : 1px solide ; #999 ; Il doit être centré et avoir une marge supérieure, donc margin : 0 auto 20px auto ;

Ajoutez donc le code suivant à index.css :

.demo {
    width: 1000px;
    height: 300px;
    border: 1px solid #999;
    background-image: url(images/Background-image en CSS3 implémente plusieurs images darrière-plan (exemple de code)),
        url(images/Background-image en CSS3 implémente plusieurs images darrière-plan (exemple de code)),
        url(images/Background-image en CSS3 implémente plusieurs images darrière-plan (exemple de code));

    background-repeat: no-repeat, no-repeat, no-repeat;
    margin: 0 auto 20px auto;
}

3 positions d'arrière-plan différentes. paramètres

Analyse des idées :

1. La première façon est d'afficher la première image d'arrière-plan à l'extrême gauche. La deuxième image est centrée à ce moment. la valeur de gauche est = (1000-300)/2=350, et la troisième image est à l'extrême droite

2. La deuxième méthode est la première image d'arrière-plan affichée à l'extrême gauche , la deuxième image est à côté de la première. A ce moment, sa valeur de gauche = la largeur de la première image de fond, 300, et la troisième image est à l'extrême droite

. 3. La troisième méthode consiste à afficher la première image d'arrière-plan à l'extrême gauche et la deuxième image à côté de la troisième image. À ce stade, sa valeur de gauche = 1000 - la deuxième image + la largeur totale de la troisième image. = 1000-600 = 400. La troisième image est à l'extrême droite

Remarque : si vous ne définissez pas la position d'arrière-plan, elle sera affichée à gauche par défaut, donc il y aura un chevauchement

Ajoutez donc le code suivant à index.css :

.bg1 {
    background-position: left top, 350px 0, 700px 0;
}

.bg2 {
    background-position: left top, 300px 0, 700px 0;
}

.bg3 {
    background-position: left top, 400px 0, 700px 0;
}

Jusqu'à présent, tout le contenu d'index.css est le suivant :

.container *{
    padding:0;
    margin:0;
}
h4{
    text-align: center;
}
.demo {
    width: 1000px;
    height: 300px;
    border: 1px solid #999;
    background-image: url(../images/Background-image en CSS3 implémente plusieurs images darrière-plan (exemple de code)),
        url(../images/Background-image en CSS3 implémente plusieurs images darrière-plan (exemple de code)),
        url(../images/Background-image en CSS3 implémente plusieurs images darrière-plan (exemple de code));

    background-repeat: no-repeat, no-repeat, no-repeat;
    margin: 0 auto 20px auto;
}

.bg1 {
    background-position: left top, 350px 0, 700px 0;
}

.bg2 {
    background-position: left top, 300px 0, 700px 0;
}

.bg3 {
    background-position: left top, 400px 0, 700px 0;
}

Ensuite, introduisez index.css dans index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>多重背景</title>
    <link rel="stylesheet" href="css/index.css" />
</head>

<body>
    <div class="container">
        <h4>效果1</h4>
        <div class="demo bg1"></div>
        <h4>效果2</h4>
        <div class="demo bg2"></div>
        <h4>效果3</h4>
        <div class="demo bg3"></div>
    </div>

</body>

</html>

L'effet de l'opération est le suivant

Background-image en CSS3 implémente plusieurs images darrière-plan (exemple de code)

Jusqu'à présent, nous avons atteint toutes les exigences

Résumé :

1. Background-image peut définir plusieurs images d'arrière-plan. Le format de syntaxe est le suivant :

background-image : url (adresse de l'image 1),

url (adresse de l'image 2),

url (adresse de l'image 3)... Vous pouvez également avoir N

2. Si plusieurs images d'arrière-plan sont définies, définissez l'arrière-plan. Lors de la répétition et du positionnement de l'arrière-plan, veuillez noter que l'ordre est le même que l'ordre des paramètres d'image. S'il est défini sur un, cela signifie que toutes les images d'arrière-plan ont les mêmes paramètres

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!

架构 css css3 html auto position margin border background

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：Utilisez l'attribut d'animation CSS Rotation pour obtenir le retournement du miroirArticle suivant：Utilisez l'attribut d'animation CSS Rotation pour obtenir le retournement du miroir

Articles Liés

Voir plus