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!
qu'est-ce que l'index MySQL
Qu'est-ce qui est mis en évidence dans jquery
Requête blockchain du navigateur Ethereum
Comment récupérer les flammes Douyin après leur disparition ?
Comment résoudre le problème des 400 requêtes incorrectes lorsque la page Web s'affiche
Outils de recherche couramment utilisés
Logiciel gratuit pour créer des sites Web
Quel est le concept de base de l'intelligence artificielle
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
