当前位置:Gxlcms > 前端框架 > background-origin属性怎么用

background-origin属性怎么用

时间:2021-07-01 10:21:17 帮助过:93人阅读

background-origin属性是用于设置背景图片的定位区域,它有三个值分别表示相对于内边距框定位、相对于边框盒定位、相对于内容框定位。

CSS3 background-origin属性

作用:规定背景图片的定位区域。

说明:设置或检索对象的背景图像计算 <' background-position '> 时的参考原点(位置)。

语法:

background-origin: padding-box|border-box|content-box;

padding-box:背景图像相对于内边距框来定位。

border-box:背景图像相对于边框盒来定位。

content-box:背景图像相对于内容框来定位。

CSS3 background-origin属性的使用示例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
border:1px solid black;
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>
<div id="div1">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>

<p>background-origin:content-box:</p>
<div id="div2">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>

</body>
</html>

效果图:

1.jpg

以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注Gxlcms相关教程栏目!!!

以上就是background-origin属性怎么用的详细内容,更多请关注Gxlcms其它相关文章!

人气教程排行