Heim >Web-Frontend >CSS-Tutorial >So verwenden Sie Hintergrund-Orgin in CSS3 (mit Code)
So verwenden Sie Hintergrund-Orgin in CSS3 (mit Code)
- 不言Original
- 2018-08-20 11:36:071998Durchsuche
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:
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
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!