So verwenden Sie Hintergrund-Orgin in CSS3 (mit Code)-CSS-Tutorial-php.cn

So verwenden Sie Hintergrund-Orgin in CSS3 (mit Code)

不言

Freigeben： 2018-08-20 11:36:07

Original

1955 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Verwendung von Hintergrund-Orgin in CSS3 (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

Legen Sie die ursprüngliche Startposition des Hintergrundbilds des Elements fest.

Syntax:

background-origin: border-box |.
content-box; Wert) oder der Inhaltsbereich wird angezeigt.

Der Effekt ist wie folgt:

So verwenden Sie Hintergrund-Orgin in CSS3 (mit Code)

Es ist zu beachten, dass dieses Attribut ungültig ist und angezeigt wird, wenn der Hintergrund nicht nicht wiederholt wird ausgehend von der Grenze.

Beispielcode:

<!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>

Nach dem Login kopieren

Verwandte Empfehlungen:

Der Unterschied zwischen Hintergrundursprung und Hintergrundclip in CSS3_html/css_WEB-ITnose

Verwendungsszenarien von CSS3, Hintergrundclip/Hintergrundursprung, einfache Erklärung_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Hintergrund-Orgin in CSS3 (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!