background-origin

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.

Continuing Learning

new file

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

submit Reset Code

Automatic operation

background-origin

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]