zoukankan      html  css  js  c++  java
  • CSS3 -- 多背景(backgrounds)

    1、CSS3 -- 多背景 描述

      CSS3的多背景,主要作用是给同一个元素设置多个背景图像,(即 在同一元素上可以设置除background-color外多个background的其它属性,因为一个元素只具备一个背景色)---(CSS3中,可以让同一个元素同时具有多个背景图像,并可以给多个背景图像设置相同或不相同的background-(position||repeat||clip||size||origin||attachment)。

      CSS2中的Background属性:

    合写:
    background: background-color || background-image || background-repeat || background-attachment || background-position; 分解写:   background-color: color值 || RGBA值;
      background-image: url();   background-repeat: repeat || repeat-x || repeat-y || no-repeat;   background-attachment: scroll || fixed;   background-position:
    <length> || <per>

      CSS3中的Background属性

    合写: 
    background: background-image || background-position/background-size || background-repeat || background-attachment || background-clip || background-origin || background-color 分解写: background-image: url(); background-position:
    <length> || <per> background-size: <length> || <per> background-repeat: repeat || repeat-x || repeat-y || no-repeat; background-attachment: scroll || fixed; background-clip: padding-box || border-box || content-box; background-origin: padding-box || border-box || content-box; background-color: color值 || RGBA值;

    提示:
      CSS3中合写时,background-size需跟在background-position的后面,并用“/”隔着,即"background-position/background-size"。
      推荐CSS3中的Background属性不要合写,需加前缀。

    2、CSS3 -- 多背景 兼容

    3、CSS3 -- 多背景 用法

      多背景:

        background-image需要多个,但多个图片之间使用逗号隔开,而其他属性可以选择一个或多个,如果有多个背景图片时,其他属性只有一个时,那么表示所有背景图片应用了相同的属性设置,但background-color只能设置一个,如果你设置多少background-color将是一种错误的语法设置。

        CSS3多背景在各支持的浏览器下都是统一写法,不需要加上自己的前缀。

    background : [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],*
      分解写:
        background-image: url1,url2,...,urlN;
        background-repeat: repeat1,repeat2,...,repeatN;
        background-position: position1,position2,...,positionN;
        background-size: size1,size2,...,sizeN;
        backrgound-attachment: attachment1,attachment2,...,attachmentN;
        background-clip: clip1,clip2,...,clipN;
        background-origin: origin1,origin2,...,originN;
        background-color: color;

      

      注意:多背景时,它的背景图片导入是有先后顺序的,越后面导入的背景图片越在下面。--- (多背景图片的显示顺序是跟其加载的先后顺序有关,并不跟定位的先后有关

    4、CSS3 -- 多背景 实例: 更多实例  http://www.w3cplus.com/content/css3-multiple-backgrounds

    整理自:(W3CPlus)CSS3 多背景

  • 相关阅读:
    [bzoj1576] [Usaco2009 Jan]安全路经Travel
    [坑][poj2396]有上下界的最大流
    bzoj1458 士兵占领
    [Ahoi2013]差异
    bzoj2424 [HAOI2010]订货
    bzoj1741 [Usaco2005 nov]Asteroids 穿越小行星群
    bzoj2251 [2010Beijing Wc]外星联络
    bzoj1977 [BeiJing2010组队]次小生成树 Tree
    bzoj2729 [HNOI2012]排队
    bzoj1925 [Sdoi2010]地精部落
  • 原文地址:https://www.cnblogs.com/libinblog/p/4497619.html
Copyright © 2011-2022 走看看