CSS3中background-clip和background-origin的区别示例介绍
发布时间:2014-03-10 17:06:57 作者:佚名
我要评论
本文为大家介绍下CSS3中background-clip和background-origin的区别,感兴趣的朋友可以参考下
相信除了我以外,还有不少童鞋在学习到background-clip和background-origin的时候都很疑惑,这俩哥们儿到底啥区别。
想搞清楚它们的区别还不简单?且看下面的DEMO:
.test {
background-image: url(pic.jpg);
background-clip: border-box;
background-origin: border-box;
border: 20px dashed black;
}
.test {
background-image: url(pic.jpg);
background-clip: border-box;
background-origin: padding-box;
border: 20px dashed black;
}
.test {
background-image: url(pic.jpg);
background-clip: padding-box;
background-origin: border-box;
border: 20px dashed black;
}
由于鄙人比较懒,就不放效果图了,有兴趣的童鞋可以自己去试试,这里可以看出,实际上background-clip决定的是背景从哪个区域开始显示,而background-origin决定的是背景从哪个区域开始绘制。
想搞清楚它们的区别还不简单?且看下面的DEMO:
复制代码
代码如下:.test {
background-image: url(pic.jpg);
background-clip: border-box;
background-origin: border-box;
border: 20px dashed black;
}
复制代码
代码如下:.test {
background-image: url(pic.jpg);
background-clip: border-box;
background-origin: padding-box;
border: 20px dashed black;
}
复制代码
代码如下:.test {
background-image: url(pic.jpg);
background-clip: padding-box;
background-origin: border-box;
border: 20px dashed black;
}
由于鄙人比较懒,就不放效果图了,有兴趣的童鞋可以自己去试试,这里可以看出,实际上background-clip决定的是背景从哪个区域开始显示,而background-origin决定的是背景从哪个区域开始绘制。
相关文章
这篇文章主要介绍了css中background-clip属性的作用,background-clip属性的通俗作用就是指定元素背景所在的区域,对css中background-clip属性的相关知识感兴趣的朋友一起看2018-03-29
CSS3基于背景裁剪(background-clip)实现的文本标题透视特效源码
这是一款CSS3基于背景裁剪(background-clip)实现的文本标题透视特效源码。画面上的外星球与飞船背景中央呈现出带有背景剪切透视的文本视觉效果。同时可响应鼠标的移动呈2017-11-17深入浅出CSS3 background-clip,background-origin和border-image教程
最近在准备一个下学期参加比赛的概念网站,希望能用到CSS3的新特性,比如background的background-clip或background-origin或border-image。但仅仅是依靠w3schools上的文档2011-01-27CSS3教程:background-clip和background-origin-CSS教程-网页制作-网页
原文:http://www.planabc.net/2008/04/14/background-clip_background-origin/ background-clip 和 background-origin 是 CSS3 中新加的 background module 属性,用来2008-10-17详解CSS3中的box-sizing(content-box与border-box)
这篇文章主要介绍了CSS3中的box-sizing(content-box与border-box)的相关资料,需要的朋友可以参考下2019-04-19- 这篇文章主要介绍了浅谈CSS3 box-sizing 属性 有趣的盒模型 ,需要的朋友可以参考下2019-04-02
- 一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性,box-sizing 属性允许您以特定的方式定义匹2015-04-09
- 这篇文章主要介绍了CSS3属性box-sizing使用指南,需要的朋友可以参考下2014-12-09
- CSS3 box-sizing属性,在很多新手朋友来看是比较陌生的,接下来介绍CSS3 box-sizing使用及注意部分,感兴趣的朋友可以了解下2013-01-08

解决CSS 中box-sizing与background-clip解决背景显示范围的问题
这篇文章主要介绍了CSS box-sizing与background-clip解决背景显示范围的问题,主要用这篇文章给大家做个记录,避免大家遇到此类问题,感兴趣的朋友跟随小编一起看看吧2019-05-13





最新评论