Home > Article > Web Front-end > How to use background-orgin in css3 (with code)
How to use background-orgin in css3 (with code)
- 不言Original
- 2018-08-20 11:36:071955browse
The content of this article is about how to use background-orgin in css3 (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Set the original starting position of the element's background image.
Syntax:
background-origin: border-box | padding-box | content-box;
Parameters indicate whether the background image comes from the border or the inner margin (default value) , or the content area starts to display.
The effect is as follows:
It should be noted that if the background is not no-repeat, this attribute is invalid and it will be displayed starting from the border.
Example 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>Related recommendations:
The difference between background-origin and background-clip in CSS3_html/css_WEB-ITnose
css3, background-clip/background-origin usage scenarios, simple explanation_html/css_WEB-ITnose
The above is the detailed content of How to use background-orgin in css3 (with code). For more information, please follow other related articles on the PHP Chinese website!