Heim > Artikel > Web-Frontend > So verwenden Sie Hintergrund-Orgin in CSS3 (mit Code)

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

不言Original: 2018-08-20 11:36:071956Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie das Opazitätsattribut in CSS, um einem Hintergrundbild Transparenz hinzuzufügen (Code)Nächster Artikel：So verwenden Sie das Opazitätsattribut in CSS, um einem Hintergrundbild Transparenz hinzuzufügen (Code)

In Verbindung stehende Artikel

Mehr sehen