Camada de cor semi-transparente sobre imagem de fundo?

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);

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

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.

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);
}

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

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%;
}

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;
}

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

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.

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 ...

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

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>

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;

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%);
}

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.