码迷,mamicode.com
首页 > Web开发 > 详细

CSS3background新增属性

时间:2014-05-23 06:32:10      阅读:331      评论:0      收藏:0      [点我收藏+]

标签:class   c   ext   http   color   a   

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;
   }

效果:

bubuko.com,布布扣

3. background-orgin

   决定背景图片的起始点。

 

如果background-attachment为fixed的话,background-orign将不会起作用。

  

CSS3background新增属性,布布扣,bubuko.com

CSS3background新增属性

标签:class   c   ext   http   color   a   

原文地址:http://www.cnblogs.com/ssyz1988/p/3741685.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!