css中background-origin属性的使用
程序员文章站
2022-03-01 12:45:44
background-origin用来规定元素背景图像的相对定位位置,它有三个属性值: 1、border-box border-box表示元素背景图像相对于border区域开始定位。 代码如下: 效果如下: 从上图可以看出,元素的背景图像从边框区域开始定位。 2、padding-box paddin ......
background-origin用来规定元素背景图像的相对定位位置,它有三个属性值:
1、border-box
border-box表示元素背景图像相对于border区域开始定位。
代码如下:
<!doctype html> <html> <head> <style> *{margin:0;padding:0;} .box{width:430px;height:280px;margin:100px auto;background:url("fengjing.jpg") no-repeat;padding:5px;border:5px dotted #000;
font-size:100px;font-weight:bold;background-origin:border-box;] </style> </head> <body> <div class="box "></div> </body> </html>
效果如下:
从上图可以看出,元素的背景图像从边框区域开始定位。
2、padding-box
padding-box表示元素背景图像相对于padding区域开始定位。
代码如下:
<!doctype html> <html> <head> <style> *{margin:0;padding:0;} .box{width:430px;height:280px;margin:100px auto;background:url("fengjing.jpg") no-repeat;padding:5px;border:5px dotted #000;
font-size:100px;font-weight:bold;background-origin:padding-box;] </style> </head> <body> <div class="box "></div> </body> </html>
效果如下:
从上图可以看出:元素背景图像从padding区域开始定位。
3、content-box
content-box表示元素背景图像相对于content区域开始定位。
代码如下:
<!doctype html> <html> <head> <style> *{margin:0;padding:0;} .box{width:430px;height:280px;margin:100px auto;background:url("fengjing.jpg") no-repeat;padding:5px;border:5px dotted #000;
font-size:100px;font-weight:bold;background-origin:content-box;] </style> </head> <body> <div class="box "></div> </body> </html>
效果如下:
从上图可以看出:元素的背景图像初始位置从content区域开始定位。
总结,background-origin属性定义了背景图像的相对定位位置,这个位置可以用background-position来改变,而且元素背景图像的区域不会因此被限定住,只对元素背景图像起作用。如果元素使用background-attachment属性时,该属性会失效。
上一篇: 通过CSS实现逼真水滴动效
推荐阅读
-
Python的Django框架中if标签的相关使用
-
Python的Django框架中的Context使用
-
详解Django中的ifequal和ifnotequal标签使用
-
webpack的CSS加载器的使用
-
Django中模版的子目录与include标签的使用方法
-
ASP.NET MVC4中使用Html.DropDownListFor的方法示例
-
在Python的Django框架中创建和使用模版
-
微信小程序 image组件binderror使用例子与js中的onerror区别
-
在风行播放器使用过程中如何切换影片中的配音
-
CentOs 7.3中搭建RabbitMQ 3.6单机多实例服务的步骤与使用