首页 > 代码库 > CSS3background新增属性
CSS3background新增属性
1. background-size
background-size: cover || contain. 该属性可以是背景图片铺满容器,前者适用于当背景图片原始尺寸小于容器大小,后者适用于图片尺寸大于容器。
2. background-clip
取值 : border-box || padding-box || content-box
需要注意的是 background在Box Model中,他是布满整个元素的Box区域的,并不是从padding内部开始,只不过边框部分遮住了部分background;backgground-color是从左border的左上角到右侧border的右下角,而background-image则是从左侧padding 的左上角到右侧border的右下角。,而webkit下background-clip还有一个更神奇的效果,就是可以让图片填充文本,那就是background-clip:text配合其私有属性-webkit-text-fill-color
在前面的基础上,我们把样式换一下
.text { font-size: 40px; text-transform: uppercase; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
效果:
3. background-orgin
决定背景图片的起始点。
如果background-attachment为fixed的话,background-orign将不会起作用。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。