Comment utiliser l'attribut background-repeat en CSS-tutoriel HTML-php.cn

Comment utiliser l'attribut background-repeat en CSS

黄舟

Libérer： 2017-06-21 15:06:44

original

3655 Les gens l'ont consulté

Syntaxe :

background-repeat : repeat | no-repeat | repeat-x | repeat-y

Copier après la connexion

Paramètres :

répéter : Image d'arrière-planCarrelage vertical et horizontal
pas de répétition : arrière-plan L'image n'est pas en mosaïque
repeat-x : L'image d'arrière-plan est en mosaïque horizontalement
repeat-y : L'image d'arrière-plan est en mosaïque verticalement

Description :

Définir ou récupérer l'arrière-plan du objet Si et comment l'image est disposée. L'image de fond de l'objet doit d'abord être spécifiée.
La fonctionnalité de script correspondante est backgroundRepeat. Veuillez consulter les autres livres que j'ai écrits.

Exemple :

menu { background: url("images/aardvark.gif"); background-repeat: repeat-y; } 
p { background: url("images/aardvark.gif"); background-repeat: no-repeat; }

Copier après la connexion

Voici une image de 25 px × 25 px, nous définissons 3 éléments div sur 200 px × 100 px et définissons l'image d'arrière-plan de l'élément div sur cette image.

Comment utiliser lattribut background-repeat en CSS

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>background-repeat属性</title>
    <style type="text/css">
        /*设置div元素的共同样式*/
        div
        {
            width:200px;
            height:100px;
            background-image:url("../App_images/lesson/run_cj/flower.jpg");
            text-align:center;
            border:1px dashed gray;
        }
        /*设置3个div元素的个别样式*/
        #div2{background-repeat:repeat-x;}
        #div3{background-repeat:repeat-y;}
        #div4{background-repeat:no-repeat;}
        hr{border-color:red;}
    </style>
</head>
<body>
    <div id="div1">
        <h3>静夜思</h3>
        <p>窗前明月光，疑似地上霜。<br/>举头望明月，低头思故乡。</p>
    </div>
    <hr/>
    <div id="div2">
        <h3>静夜思</h3>
        <p>窗前明月光，疑似地上霜。<br/>举头望明月，低头思故乡。</p>
    </div>
    <hr/>
    <div id="div3">
        <h3>静夜思</h3>
        <p>窗前明月光，疑似地上霜。<br/>举头望明月，低头思故乡。</p>
    </div>
    <hr/>
    <div id="div4">
        <h3>静夜思</h3>
        <p>窗前明月光，疑似地上霜。<br/>举头望明月，低头思故乡。</p>
    </div>
</body>
</html>

Copier après la connexion

L'effet d'aperçu dans le navigateur est le suivant :

Comment utiliser lattribut background-repeat en CSS

Analyse :

Parce que le premier élément A div n'a pas de valeur d'attribut background-repeat définie, car le navigateur utilisera la valeur par défaut de background-repeat "repeat", et l'image d'arrière-plan sera carrelée dans les directions horizontale et verticale. La valeur de l'attribut background-repeat du deuxième élément div est "repeat-x", donc l'image d'arrière-plan sera carrelée horizontalement (axe des x). La valeur de l'attribut background-repeat du troisième élément div est "repeat-y", donc l'image d'arrière-plan sera carrelée dans la direction verticale (axe y)

Vous pourriez être curieux de connaître les paramètres d'attribut du Élément hr. Pourquoi définir hr ? Si la valeur de l'attribut border-color est rouge, la couleur de hr changera au lieu de définir l'attribut de couleur de hr sur rouge ou background-color sur rouge ? Ceci est lié aux caractéristiques de hr lui-même, que nous expliquerons en détail dans la section CSS Advanced « HR CSS Settings ».

Remarque : l'effet de carrelage ne se produira que si la largeur ou la hauteur de l'élément avec une image d'arrière-plan est supérieure à la largeur ou à la hauteur de l'image d'arrière-plan elle-même.

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!