Maison > Article > interface Web > Comment utiliser l'attribut background-origin
Comment utiliser l'attribut background-origin
- 青灯夜游original
- 2019-01-30 14:17:545219parcourir
L'attribut background-origin est utilisé pour définir la zone de positionnement de l'image d'arrière-plan. Il a trois valeurs indiquant respectivement le positionnement par rapport à la zone de remplissage, le positionnement par rapport à la zone de bordure et le positionnement par rapport à la zone de contenu.
Attribut CSS3 background-origin
Fonction : Spécifie la zone de positionnement de l'image d'arrière-plan .
Description : Définissez ou récupérez l'origine de référence (position) de l'image d'arrière-plan de l'objet lors du calcul de la position d'arrière-plan '>.
Syntaxe :
background-origin: padding-box|border-box|content-box;
padding-box : L'image d'arrière-plan est positionnée par rapport à la boîte de remplissage.
border-box : L'image d'arrière-plan est positionnée par rapport à la zone de bordure.
content-box : L'image d'arrière-plan est positionnée par rapport à la zone de contenu.
Exemple d'utilisation de l'attribut CSS3 background-origin
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:1px solid black;
padding:35px;
background-image:url('https://img.php.cn/upload/article/000/000/024/5c513adf97e86533.jpg');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
</style>
</head>
<body>
<p>background-origin:border-box:</p>
<div id="div1">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
<p>background-origin:content-box:</p>
<div id="div2">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
</body>
</html>Rendu :
Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! !
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!