您的搜索结果

    使用CSS的多背景

    通过使用 CSS3,你可以向元素应用多个背景。这些背景相互堆叠,第一个背景放在最上面,最后一个背景放在最下面。 仅最后一个背景允许拥有背景色。

    指定多个背景很简单:

    .myclass {
      background: background1, background 2, ..., backgroundN;
    }
    

    你既可以使用简写属性 background 也可以使用除 background-color 外的独立属性。即,,下面的属性可以用属性列表指定, 每个背景一个: backgroundbackground-attachmentbackground-clip, background-imagebackground-originbackground-positionbackground-repeatbackground-size

    示例

    该例中,三个背景进行堆叠:火狐标志,一个线性渐变, 和一张带有花的图片:

    .multi_bg_example {
      background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
            linear-gradient(to right, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
            url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
      background-repeat: no-repeat, no-repeat, repeat;
      background-position: bottom right, left, right;
    }
    
    结果
    css_multibg.png

    如你所见,火狐标志(列表第一项)在最上面,紧接着是放在图片上面的线性渐变。每个子属性 (background-repeatbackground-position) 应用于对应的背景。因此属性 background-repeat 的第一个值应用于第一个(最前面)的背景,依次可推。

    其它

     
     

    附件

    文件 大小 日期 附加者为
    css_multibg.png
    29855 字节 2009-12-23 19:04:40 Sheppy

    文档标签和贡献者

    对本页有贡献的人: Nightingale
    最后编辑者: Nightingale,