Camada de cor semi-transparente sobre imagem de fundo?

213

Eu tenho uma DIV e gostaria de colocar um padrão como pano de fundo. Esse padrão é cinza. Então, para torná-lo um pouco mais agradável, eu gostaria de colocar uma "camada" de cor transparente e clara. Abaixo está o que eu tentei, mas que não funcionou. Existe uma maneira de colocar a camada colorida sobre a imagem de fundo?

Aqui está o meu CSS:

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);
Marc
fonte

Respostas:

217

Aqui está:

.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML para isso:

<div class="background">
    <div class="layer">
    </div>
</div>

Claro que você precisa definir uma largura e altura para a .backgroundclasse, se não houver outros elementos dentro dela

Johannes Klauß
fonte
10
não há razão absoluta para um posicionamento relativo e absoluto.
Sven Bieder
2
Ah sim, claro, eu meio que estava no pop-up modal, não sei por quê. Sua resposta é obviamente mais fácil e limpa.
Johannes Klauß
@ JohannesKlauß como é que a resposta dele é mais limpa e fácil? não está funcionando, pelo menos para o meu caso.
precisa saber é o seguinte
2
Eu acho que isso é mais limpo. A caixa-sombra tem problemas se o conteúdo não superior a bg etc.
Jack
1
Solução perfeita!
Roy Shoa
299

Eu sei que esse é um tópico muito antigo, mas aparece no topo do Google, então aqui está outra opção.

Este é CSS puro e não requer nenhum HTML extra.

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

Há um número surpreendente de usos para o recurso box-shadow.

BevansDesign
fonte
3
Muito agradável! Essa é uma boa idéia em termos de desempenho? Você não olhou para o desempenho da caixa-sombra
Miguel Stevens
18
Hack agradável, mas um grande assassino de desempenho. Isso diminuirá a velocidade de todos os dispositivos móveis. A sombra da caixa causa problemas de desempenho em dispositivos móveis. É melhor evitá-lo, especialmente se houver outro caminho a percorrer.
Hexodus
4
Você é um gênio, senhor!
Mika
7
Apenas uma atualização alguns anos depois: atualmente eu uso esse método em todo o site kotulas.com e não há uma desaceleração significativa que eu notei. Pode se tornar um problema se você o estiver usando em centenas de elementos, mas mesmo em uma página com mais de 150 imagens, não é um problema para mim. (E isso é em um computador de trabalho.) Naturalmente, convém testá-lo com antecedência para garantir que seja adequado para você. E quanto à compatibilidade com navegadores antigos, como o fallback é que o usuário não vê um efeito de passar o mouse (sem outros problemas), eu estou bem com isso.
BevansDesign 03/03
8
Eu, pessoalmente, usá-lo como este: box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .2).
Neurotransmitter
135

Dos truques CSS ... há uma maneira de fazer isso sem a indexação z e a adição de pseudo elementos - requer gradiente linear, o que eu acho que significa que você precisa de suporte CSS3

.tinted-image {
  background-image: 
    /* top, transparent red */
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* your image */
    url(image.jpg);
}
Tom
fonte
Isso funcionou muito bem, você não pode animar gradientes; no entanto, se você quiser pulsar uma cor, não pense que isso seja possível com qualquer método.
sricks 9/09/15
1
Eu tinha background-size:cover;e background-position:center center;defini esse elemento. Isso parece cancelar esse efeito.
Solace
Funcionando muito bem com um tamanho de plano de fundo: capa; depois de. Em cromo, pelo menos.
Davidbonachera
Definitivamente, a maneira mais conveniente de pintar padrões e imagens de segundo plano, mas tenha cuidado ao verificá-lo com o Chrome e outros, especialmente se aplicado à tag body, o chrome rolará com uma tonelada de atraso. FF lida bem com isso.
Hastig Zusammenstellen
4
Eu sou o único com idade suficiente para obter a referência de Tom?
Abram
46

Você também pode usar um gradiente linear e uma imagem: http://codepen.io/anon/pen/RPweox

.background{
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url('http://www.imageurl.com');
}

Isso ocorre porque a função gradiente linear cria uma imagem que é adicionada à pilha de plano de fundo. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

TorranceScott
fonte
Bom truque para adicionar à caixa de ferramentas!
Adam Yost
26

Você precisa de um elemento de quebra automática com a imagem bg e nele o elemento de conteúdo com a cor bg:

<div id="Wrapper">
  <div id="Content">
    <!-- content here -->
  </div>
</div>

e o css:

#Wrapper{
    background:url(../img/bg/diagonalnoise.png); 
    width:300px; 
    height:300px;
}

#Content{
    background-color:rgba(248,247,216,0.7); 
    width:100%; 
    height:100%;
}
Sven Bieder
fonte
25

Tente isso. Funciona para mim.

.background {
    background-image: url(images/images.jpg);
    display: block;
    position: relative;
}

.background::after {
    content: "";
    background: rgba(45, 88, 35, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.background > * {
    z-index: 10;
}
Yaufaniadam
fonte
2
Esta é realmente uma ótima resposta que não requer elementos HTML adicionais. Obrigado!
patr1ck 23/02
16

Usei isso como uma maneira de aplicar tonalidades de cores e gradientes às imagens, para facilitar a criação de textos sobrepostos dinâmicos para facilitar a legibilidade quando você não pode controlar os perfis de cores da imagem. Você não precisa se preocupar com o z-index.

HTML

<div class="background-image"></div>

SASS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 247, 216, 0.7);
  }
}

CSS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
}

.background-image:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(248, 247, 216, 0.7);
  }

Espero que ajude

d4ncer
fonte
Isso funciona, mas você precisa alterar o segundo "left: 0;" para "embaixo: 0;"
Matthew Hudson
1
Essa deve ser a resposta aceita, pois evita a criação desnecessária de elementos. Apenas certifique-se o seu .background-imagem divtem pelo menos uma posição: relative
mjsarfatti
6

Veja minha resposta em https://stackoverflow.com/a/18471979/193494 para obter uma visão geral abrangente de possíveis soluções:

  1. usando vários fundos com um gradiente linear,
  2. vários fundos com um PNG gerado ou
  3. estilizando um pseudoelemento: after para atuar como uma camada de segundo plano secundária.
Kevin C.
fonte
4
Por favor, não poste links como respostas. Coloque o código relevante aqui, mas vincule-o à fonte da qual você o copiou.
Blazemonger
4

Por que tão complicado? Sua solução estava quase certa, exceto que é muito mais fácil tornar o padrão transparente e a cor de fundo sólida . PNG pode conter transparências. Portanto, use o photoshop para tornar o padrão transparente, definindo a camada para 70% e salvando sua imagem novamente. Então você só precisa de um seletor. Funciona em vários navegadores.

CSS:

.background {
   background: url('../img/bg/diagonalnoise.png');/* transparent png image*/
   background-color: rgb(248, 247, 216);
}

HTML:

<div class="background">
   ...
</div> 

Este é o básico. Um exemplo de uso segue de onde eu mudei backgroundpara, background-imagemas ambas as propriedades funcionam da mesma maneira.

body { margin: 0; }
div {
   height: 110px !important;
   padding: 1em;
   text-transform: uppercase;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 600;
   color: white;
   text-shadow: 0 0 2px #333;
}
.background {
   background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');/* transparent png image */
   }
.col-one {
  background-color: rgb(255, 255, 0);
}
.col-two {
  background-color: rgb(0, 255, 255);
}
.col-three {
  background-color: rgb(0, 255, 0);
}
<div class="background col-one">
 1. Background
</div> 
<div class="background col-two">
 2. Background
</div> 
<div class="background col-three">
 3. Background
</div> 

POR FAVOR, ESPERE UM MINUTO! Leva algum tempo para carregar os padrões externos.

Este site parece ser bastante lento ...

Hexodus
fonte
Você pode aplicar a cor de plano de fundo, por exemplo, :hovere isso seria sobreposto à imagem de plano de fundo?
Sir
levaria mais tempo para inicializar o Photoshop e fazer isso, em vez de adicionar algumas linhas de código.
Nhiser
Eu tentei isso, mas encontrou o png transparente, foi muito grande (~ 500kb) no tamanho do arquivo, que pode ser uma desvantagem dessa abordagem
madz
@madz Eu falei sobre fazer um padrão - o que não deve resultar em um arquivo grande. Adicionei um exemplo usando uma imagem de 110x110px que possui apenas 5kb. Se você realmente precisa de uma imagem maior, tente usar o tinypng.com para compactá-la.
Hexodus 12/06/19
2

Você pode usar um pixel semitransparente, que você pode gerar por exemplo aqui , mesmo em base64 Aqui está um exemplo com 50% de branco:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=),
url(../img/leftpanel/intro1.png);
background-size: cover, cover;
  • sem fazer upload

  • sem html extra

  • Eu acho que o carregamento deve ser mais rápido que o gradiente linear ou sombra de caixa

Fanky
fonte
2

Aqui está um truque mais simples, com apenas css.

<div class="background"> </div>
    <style>
    .background {
      position:relative;
      height:50px;
      background-color: rgba(248, 247, 216, 0.7);
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC); 
    }

    .background:after {
        content:" ";
        background-color:inherit;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; 
    }

    </style>

Zortext
fonte
1

Outro com um SVG como imagem de sobreposição embutida (nota: se você usar #dentro do código svg, precisará codificá-lo!):

background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path fill="rgba(255, 255, 255, 0.4)" d="M0 0h1v1H0z"/></svg>')
                no-repeat center center/cover, 
            url('overlayed-image.jpg') no-repeat center center/cover;
lsblsb
fonte
0

Eu simplesmente usei a propriedade background-image css na div background de destino.
Observe que a imagem de plano de fundo aceita apenas funções de cores degradê.
Então, usei gradiente linear adicionando a mesma cor de sobreposição desejada duas vezes (use o último valor de rgba para controlar a opacidade da cor).

Além disso, encontrou esses dois recursos úteis para:

  1. Adicione texto (ou div com qualquer outro conteúdo) sobre a imagem de fundo: Hero Image
  2. Desfoque apenas a imagem de fundo, sem desfocar a div na parte superior: Imagem de fundo desfocada

HTML

<div class="header_div">
</div>

<div class="header_text">
  <h1>Header Text</h1>
</div>

CSS

.header_div {
  position: relative;
  text-align: cover;
  min-height: 90vh;
  margin-top: 5vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  background-image: linear-gradient(rgba(38, 32, 96, 0.2), rgba(38, 32, 96, 0.4)), url("images\\header img2.jpg");
  filter: blur(2px);
}

.header_text {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}
Mimina
fonte
0

Você também pode adicionar opacidade à sua cor de sobreposição.

Em vez de fazer

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

Você pode fazer:

background: url('../img/bg/diagonalnoise.png');

Em seguida, crie um novo estilo para a cor da opacidade:

.colorStyle{
    background-color: rgba(248, 247, 216, 0.7);
    opacity: 0.8;
}

Altere a opacidade para o número que desejar abaixo de 1. Em seguida, você torna esse estilo de cor do mesmo tamanho da sua imagem. Deveria funcionar.

Vaibhav Herugu
fonte