Maison > Article > interface Web > Comment utiliser background-orgin en CSS3 (avec code)

Comment utiliser background-orgin en CSS3 (avec code)

不言original: 2018-08-20 11:36:071956parcourir

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 :

Comment utiliser background-orgin en CSS3 (avec code)

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

Scénarios d'utilisation de css3, background-clip/background-origin, explication simple_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!

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：Comment utiliser l'attribut opacité en CSS pour ajouter de la transparence à une image d'arrière-plan (code)Article suivant：Comment utiliser l'attribut opacité en CSS pour ajouter de la transparence à une image d'arrière-plan (code)

Articles Liés

Voir plus