css3 background-origin property
Translation results：
background
UK[ˈbækgraʊnd] US[ˈbækˌɡraʊnd]
n. (painting, etc.) background; background color; background information; soundtrack
Plural: backgrounds
origin
英[ˈɒrɪdʒɪn] 美[ˈɔ:rɪdʒɪn]
n. Origin; origin, root; [number ]Origin, starting point; [solution] (tendon, nerve) starting point
Plural: origins
css3 background-origin propertysyntax
Function: Specifies the positioning area of the background image.
Description: Set or retrieve the reference origin (position) when calculating <' background-position '> of the object's background image.
The background-origin attribute in css3 is used to set the positioning area of the background image. It has three values indicating positioning relative to the inner margin box, positioning relative to the border box, and positioning relative to the content box
css3 background-origin propertyexample
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:1px solid black;
padding:35px;
background-image:url('http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
</style>
</head>
<body>
<p>background-origin:border-box:</p>
<div id="div1">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
<p>background-origin:content-box:</p>
<div id="div2">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
</body>
</html>Run instance »
Click the "Run instance" button to view the online instance