mozilla
Os seus resultados da pesquisa

    Múltiplos planos de fundo

    Começando com o Gecko 1.9.2, você pode aplicar múltiplos fundos aos elementos. Estes são colocados cada um em uma camada, um sobre o outro, com o primeiro fundo previsto no topo e o último fundo listado no fundo.

    Especificar múltiplos fundos é fácil:

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

    Você pode fazer isto com o apanhado da propriedade background e das sub-propriedades desta: Background-related CSS properties: background, background-attachment, background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size.

    Exemplo

    Neste exemplo, três fundos são empilhados: a logo do Firefox, um gradiente linear (en) e uma imagem com flores:

    .multi_bg_example {
      background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
            -moz-linear-gradient(left, 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;
    }
    
    Foto Demonstração ao vivo
    css_multibg.png  

    Como você pode ver aqui, a logo do Firefox (listada primeiro) está no topo, seguida pelo gradiente, que está uma camada acima do fundo florido. Cada sub-propriedade (background-repeat e background-position) subsequentes aplicam-se aos fundos correspondentes. Dessa forma, o primeiro valor listado para background-repeat aplica-se ao primeiro fundo (mais a frente), e assim por diante.

    Veja também

    Etiquetas do documento e colaboradores

    Contributors to this page: Verruckt, teoli
    Última atualização por: teoli,