Le contenu de cet article explique comment utiliser background-orgin en CSS3 (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Définissez la position de départ d'origine de l'image d'arrière-plan de l'élément.
Syntaxe :
background-origin: border-box | padding-box | content-box;
les paramètres indiquent respectivement si l'image d'arrière-plan provient de la bordure ou de la marge intérieure (par défaut valeur) ou la zone de contenu commence à s'afficher.
L'effet est le suivant :
Il est à noter que si le fond n'est pas sans répétition, cet attribut est invalide et il sera affiché à partir de la frontière.
Exemple de code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景原点</title>
<style type="text/css">
.wrap {
width:220px;
border:20px dashed #000;
padding:20px;
font-weight:bold;
color:#000;
background:#ccc url(http://static.php.cn/static/img/logo_index.png) no-repeat;
background-origin: content-box;
position: relative;
}
.wrap span {
position: absolute;
left:0;
top:0;
}
.content {
height:80px;
border:1px solid #333;
}
</style>
</head>
<body>
<div class="wrap">
<span>padding</span>
<div class="content">content</div>
</div>
</body>
</html>Recommandations associées :
La différence entre background-origin et background-clip dans CSS3_html/css_WEB-ITnose
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!
Que signifie le wifi désactivé ?
Que dois-je faire si msconfig ne peut pas être ouvert ?
Le rôle de l'outil formatfactory
La différence entre la boucle while et la boucle do while
Comment résoudre les caractères chinois tronqués devc
Comment enregistrer un portefeuille Bitcoin
Marché ondulation aujourd'hui
Pilote de clavier Lenovo
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
