CSS3欲速则不达—Background新属性以及多背景

CSS3中为新增 Background 几个新属性值::Background-size、Background-clip和Background-origin以及Background的多背景使用——Multipls Backgrounds

在此之前我们来瞧瞧CSS3之前的Background属性和CSS3目前所有的属性。

Background属性

CSS3之前所拥有的属性

  • background-color:指定对象的背景颜色
  • background-image:指定对象的背景图像。可以是真实图片路径也可以使用CSS3中的渐变创建的“背景图像”
  • background-repeat:指定对象的背景图像如何铺排填充
  • background-attachment:指定对象的背景图像是随对象内容滚动还是固定的
  • background-position:指定对象的背景图像位置

CSS3新增加的属性

  • background-origin:指定对象的背景图像显示的原点
  • background-clip:指定对象的背景图像向外裁剪的区域。
  • background-size:指定对象的背景图像的尺寸大小。

这里还新增加了一个属性:可以为一个元素增加多个背景,我们接下来来一组组介绍。

接下来我们一起来温习下CSS3之前的属性和CSS3新增加的属性吧

background各属性温故而知新

  1. background-color

    对于background-color属性,CSS3中貌似增加的Hsl、Hsla、Rgba色彩模式对其完善,其他没多大变化,点击了解新增加的颜色模式

  2. background-image

    background-image属性,CSS3之前对于背景图片只有none | <url>两个值,不过CSS3中又新增加了gradient背景渐变,所以可以自然就又多了<linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>四个参数。点击了解Gradients背景渐变

    而且CSS3中新增加多重背景Multiple Backgrounds概念,所以就可以为一个元素设置同时设置多个图片和渐变背景,每组属性间使用逗号分隔。如果设置的多重背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上。

  3. background-repeat

    background-repeat属性,在已有的repeat-x|repeat-y|repeat|no-repeat基础上又新增加了round|space

    • round会让background-image自动缩放直到适应且填充满整个容器
    • space会让background-image以相同的间距平铺且填充满整个容器或某个方向
    .element {
        width: 300px;
        height: 260px;
        background-image: url(../pic/ex1.png);
        background-position: 0 0;
        background-repeat: repeat;
        border: 1px solid #222222;
        margin: 10px;
    }
    .element1{background-repeat:round}
    .element2{background-repeat:space}
    
    background-repeat中round和space属性

    以下DEMO只在Opera有效果

    repeat

    round

    space

    round和space属性的区别:为了让不切割重复的图片,而采取的两种方式,round是缩放图片的大小,而space则是增加重复图片之间的距离。

  4. background-attachment

    background-attachment除了 fixed | scroll还增加了 local

    • fixed:背景图像相对于窗体固定。
    • scroll:默认值,背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动
    • local:背景图像相对于元素内容固定,也就是说当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容

    新增的属性 local ,国外牛人用此模仿了google reader的效果。DEMO和源码如下如下,因为local现在只有chrome支持,所以其他浏览器看没效果

    .scrollbox {
        overflow: auto;
        width: 200px;
        max-height: 200px;
        margin: 50px auto;
        
        background:
        /* Shadow covers */
        -webkit-linear-gradient(white 30%, rgba(255,255,255,0)),
        -webkit-linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
        
        /* Shadows */
        -webkit-radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
        -webkit-radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
        background-repeat: no-repeat;
        background-color: white;
        background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
        
        /* Opera doesn't support this in the shorthand */
        background-attachment: local, local, scroll, scroll;
    }
    

    在chrome下查看DEMO

    • 往下滚动
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 结束!
    • 这里没有shadow!
    background-attachment 属性 local

    点击查看国外牛人更详细介绍local属性

  5. background-position

    设置或检索对象的背景图像位置。必须先指定background-image属性。该属性提供2个参数值。如果提供两个,第一个用于横坐标,第二个用于纵坐标。如果只提供一个,该值将用于横坐标;纵坐标将默认为50%。

  6. background-originCSS3新属性

    设置或检索对象的背景计算background-position时的参考原点(位置)。

    • padding-box:从padding区域(含padding)开始显示背景。
    • border-box:从border区域(含border)开始显示背景。
    • content-box:从content区域开始显示背景。

    注意:background-color是从border区域(含border)开始显示背景,而background-image从padding区域(含padding)开始显示背景

  7. background-clipCSS3新属性

    指定对象的背景向外裁剪的区域。

    • padding-box:从padding区域(不含padding)开始向外裁剪背景。
    • border-box:从border区域(不含border)开始向外裁剪背景。
    • content-box:从content区域开始向外裁剪背景。
    • text:从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果。

    background-clip与

  8. background-sizeCSS3新属性

    检索或设置对象的背景图像的尺寸大小。

    • length:用长度值指定背景图像大小。不允许负值。
    • percentage:用百分比指定背景图像大小。不允许负值。
    • auto:背景图像的真实大小。
    • cover:将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
    • contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。

    该属性提供2个参数值(特性值cover和contain除外)。如果提供两个,第一个用于定义背景图像的宽度,第二个用于定义背景图像的高度。如果只提供一个,该值将用于定义背景图像的宽度,默认值为auto,即高度为auto,此时背景图以提供的宽度作为参照来进行等比缩放。

  9. Multiple BackgroundsCSS3新概念

    重新了解了下background属性之后,我们再来看 Multiple Backgrounds 多重背景这概念

    多重背景使一个元素可以设置多重背景图像。每组属性间使用逗号分隔,如果设置的多重背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上

    假设元素上有3张图片

    /*缩写方式:*/
    .multipleBackgrounds {
        background:url(html5.jpg) no-repeat scroll 10px 20px,url(js.jpg) no-repeat scroll 50px 60px,url(css.jpg) no-repeat scroll 90px 100px;
        background-origin:content-box,content-box,content-box;
        background-clip:padding-box,padding-box,padding-box;
        background-size:105px 140px,105px 140px,105px 140px;;
    }
    /*拆分方式:*/
    .multipleBackgrounds{
        background-image:url(html5.jpg),url(js.jpg),url(css.jpg);
        background-repeat:no-repeat,no-repeat,no-repeat;
        background-attachment:scroll,scroll,scroll;
        background-repeat:10px 20px,50px 60px,90px 100px;
        background-origin:content-box,content-box,content-box;
        background-clip:padding-box,padding-box,padding-box;
        background-size:105px 140px,105px 140px,105px 140px;
    }
    

    DEMO

    Multiple Backgrounds缩写、拆分方式

点击下载本文出现所有DEMO

本文源链接:http://www.html5jscss.com/css3%e6%ac%b2%e9%80%9f%e5%88%99%e4%b8%8d%e8%be%be-background%e6%96%b0%e5%b1%9e%e6%80%a7%e4%bb%a5%e5%8f%8a%e5%a4%9a%e8%83%8c%e6%99%af.html

转载请注明《CSS3欲速则不达—Background新属性以及多背景》| html5jscss

评论关闭了.