Comment utiliser background-orgin en CSS3 (avec code)-tutoriel CSS-php.cn

Comment utiliser background-orgin en CSS3 (avec code)

不言

Libérer： 2018-08-20 11:36:07

original

1955 Les gens l'ont consulté

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>

Copier après la connexion

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!