This attribute is new in CSS3. Although of course there are certain browser compatibility issues (mainly due to low version IE browsers), as time goes by, CSS3 will become the mainstream. The following is detailed with the example code. Introduce the usage of this attribute.
Syntax structure:
background-origin:border-box|padding-box|content-box
The parameters respectively indicate whether the background image is displayed from the border, padding (default value), or content area.
This attribute is used to specify the position where the background image in the element starts to be drawn. Of course, the position where the background image starts to be drawn is related to the attribute value. Let's introduce them separately below.
一.border-box:
This attribute value specifies that the background image is drawn from the border area (including border). The code example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-origin属性-php中文网</title>
<style type="text/css">
ul li
{
border:10px dashed green;
width:600px;
height:600px;
padding:10px;
margin-top:10px;
list-style:none;
background-repeat:no-repeat;
}
.border-box
{
background-origin:border-box;
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
}
</style>
</head>
<body>
<ul class="test">
<li class="border-box"></li>
</ul>
</body>
</html>You can see from the above code The background image is rendered starting from the border, including the border area.
2.padding-box:
It is stipulated that the background image is drawn starting from padding, including the padding area. The code example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn" />
<title>background-origin属性-php中文网</title>
<style type="text/css">
ul li
{
border:10px dashed green;
width:600px;
height:600px;
padding:10px;
margin-top:10px;
list-style:none;
background-repeat:no-repeat;
}
.padding-box
{
background-origin:padding-box;
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
}
</style>
</head>
<body>
<ul class="test">
<li class="padding-box"></li>
</ul>
</body>
</html> In the above code, the background image It is drawn starting from the padding area.
三.content-box:
This attribute value stipulates that the background image is drawn starting from the content area. The so-called content area refers to the border and padding area. The code example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-origin属性-php中文网</title>
<style type="text/css">
ul li
{
border:10px dashed green;
width:600px;
height:600px;
padding:10px;
margin-top:10px;
list-style:none;
background-repeat:no-repeat;
}
.content-box
{
background-origin:content-box;
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
}
</style>
</head>
<body>
<ul class="test">
<li class="content-box"></li>
</ul>
</body>
</html>It can be seen from the performance of the above code that the background image is drawn starting from the content area.
Some friends may be confused by this. Since it is stipulated that drawing should start from the content area, why do the padding and border areas both have background images displayed? Here everyone needs to understand such a difference. There are two differences between being able to draw and starting to draw. a concept.
Next Section