css background-origin属性简介说明


摘要:
下文讲述css中background-origin属性的功能简介说明,如下所示:


css background-origin属性功能说明

css background-origin属性的功能是为背景图片的起始位置进行定位。
css background-origin 语法说明;
css background-origin:border-box|padding-box|content-box
属性值说明:
1.border-box
从元素的外边框起始位置开始铺设背景图片
2.padding-box
从元素的padding开始位置开始铺设背景图片
3.content-box
从内容的开始位置铺设背景图片

css background-origin属性举例应用

<html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title> 
<style>
 
 div{
  border:10px dashed green; 
  width:250px; 
  height:130px; 
  padding:10px; 
  margin-top:10px; 
  background-repeat:no-repeat;
}
.border-box{ 
  background-origin:border-box;
  background-image:url(http://www.maomao365.com/wp-content/uploads/2020/01/css_bg.png); 
} 
 
.padding-box{ 
  background-origin:padding-box;
  background-image:url(http://www.maomao365.com/wp-content/uploads/2020/01/css_bg.png); 
} 



.content-box{ 
  background-origin:content-box;
  background-image:url(http://www.maomao365.com/wp-content/uploads/2020/01/css_bg.png); 
} 



</style>
</head>

<body>

<div  class='border-box' >  </div>


<div  class='padding-box' >  </div>


<div  class='content-box' >  </div>


</body>
</html>
css background-origin属性简介说明

css background-origin属性简介说明