css中的background-origin属性怎么用
导读:本文共1639字符,通常情况下阅读需要5分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: CSS3background-origin属性 作用:规定背景图片的定位区域。 说明:设置或检索对象的背景图像计算<'background-position'>时的参考原点(位置)。 语法: background-origin:padding-box|border-box|... ...
目录
(为您整理了一些要点),点击可以直达。CSS3background-origin属性
作用:规定背景图片的定位区域。
说明:设置或检索对象的背景图像计算<'background-position'>时的参考原点(位置)。
语法:
background-origin:padding-box|border-box|content-box;
padding-box:背景图像相对于内边距框来定位。
border-box:背景图像相对于边框盒来定位。
content-box:背景图像相对于内容框来定位。
CSS3background-origin属性的使用示例
<!DOCTYPEhtml>
<html>
<head>
<style>
div
{
border:1pxsolidblack;
padding:35px;
background-image:url('https://img.php.cn/upload/article/000/000/024/5c513adf97e86533.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>
<divid="div1">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
<p>background-origin:content-box:</p>
<divid="div2">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
</body>
</html>
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
css中的background-origin属性怎么用的详细内容,希望对您有所帮助,信息来源于网络。