CSS3中如何使用background-origin属性?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
background-origin属性是用于设置背景图片的定位区域,它有三个值分别表示相对于内边距框定位,相对于边框盒定位,相对于内容框定位。
<强>
作用:规定背景图片的定位区域。
说明:设置或检索对象的背景图像计算& lt; & # 39;背景位置& # 39;比;时的参考原点(位置)。
语法:
background-origin: padding-box | border-box |内容框; padding-box:背景图像相对于内边距框来定位。
border-box:背景图像相对于边框盒来定位。
内容框:背景图像相对于内容框来定位。
<强>
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; style>
div
{
边界:1 px固体黑色;
填充:35 px;
背景图片:url (& # 39; https://img.php.cn/upload/article/000/000/024/5c513adf97e86533.jpg& # 39;);
平铺方式:不再重演;
背景位置:左;
}
# div1
{
background-origin: border-box;
}
# div2
{
background-origin:内容框;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; p> background-origin: border-box: & lt;/p>
& lt; div id=癲iv1"祝辞
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
& lt;/div>
& lt; p> background-origin:内容框:& lt;/p>
& lt; div id=癲iv2"祝辞
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
& lt;/div>
& lt;/body>
& lt;/html> 感谢各位的阅读!看完上述内容,你们对CSS3中如何使用background-origin属性大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注行业资讯频道。
