css3,background-clip/background-origin的使用场景,通俗讲解_html/css_WEB-ITnose
程序员文章站
2022-04-13 14:52:07
...
先不说background-clip/background-origin的用法,我们先来聊聊css背景方面的知识。
1 2 3 4 5css背景知识点 6 17 18 19 20 21
现在p的宽和高各是100px,颜色的范围也是100*100的对吧,如果给它加上padding-top:10px呢?那么现在的高是110,颜色的背景是100*110对不?
因为背景是包括padding的,这对理解为什么需要使用background-clip和background-origin至关重要。
透露一下,大部分情况会使用在有用精灵图的背景上。
1 2 3 4 5css背景知识点 6 26 27 2829 3031 32
效果图
我现在想让中间的爱心Y方向向下移动一点,我给p标签加上padding-top:10px;
效果如下
它并没有向下移动而是高度多出了一些,如果你理解了我上面说的,那你应该可以理解这个。
之所以会这样是因为背景包括了padding。但是我们现在并不想这样,那就可以用css3的属性background-clip,这是一个裁剪属性
加上background-clip:content-box;就可以了,什么意思呢?就是说从内容开始计算背景,那么就不会包括padding了。
应该懂了吧?
那么background-origin什么意思呢?
不知道你们有没有方向一个现象,就是我们使用精灵图的时候默认图片会显示在左上角。
如果你想改变它的位置就可以使用background-oringin
如果想从中间开始,那就设置成background-oringin:content-box;
当然还有其他的一些属性,你们可以去网上查一下。
推荐阅读
-
CSS3中background-origin和background-clip的区别_html/css_WEB-ITnose
-
【CSS3】background-origin和background-clip的区别_html/css_WEB-ITnose
-
css3,background-clip/background-origin的使用场景,通俗讲解_html/css_WEB-ITnose
-
【CSS3】background-origin和background-clip的区别_html/css_WEB-ITnose
-
css3,background-clip/background-origin的使用场景,通俗讲解_html/css_WEB-ITnose
-
CSS3中background-origin和background-clip的区别_html/css_WEB-ITnose