本文摘自PHP中文网,作者藏色散人,侵删。
css background-origin属性background-origin属性用于设置背景图片的定位区域。语法:background-origin: padding-box|border-box|content-box;其中三个属性值分别表示:相对于内边距框定位、相对于边框盒定位、相对于内容框定位。![](http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/000/020/5cedf16353425659.jpg)
css background-origin属性怎么用?
作用:规定 background-position 属性相对于什么位置来定位。
语法:
1 | background-origin: padding-box|border-box|content-box;
|
说明:padding-box 背景图像相对于内边距框来定位。border-box 背景图像相对于边框盒来定位。content-box 背景图像相对于内容框来定位。
注释:如果背景图像的 background-attachment 属性为 "fixed",则该属性没有效果。
css background-origin属性使用示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html>
<html>
<head>
<style>
div
{
border:1px solid black;
padding:35px;
background-image:url( 'http://ypimg.muzhuangnet.com/Collect/csharp/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>
|
效果输出:
![1559097618773394.png 3e1e3c98bdbd5495f2d34c41fd500d9.png](http://ypimg.muzhuangnet.com/Collect/csharp/upload/image/194/725/611/1559097618773394.png)
以上就是css background-origin属性怎么用的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css文件中如何引入另一个css文件?(代码示例)
css如何实现图片抽屉式效果
css padding属性怎么用
css怎么设置高宽
css flex-shrink属性怎么用
css margin-bottom属性怎么用
html外部引用css文件不生效的原因
css如何设置文字间距
css如何不显示元素
css绘制扇形进度条
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css background-origin属性怎么用