Strato di colore semitrasparente sull'immagine di sfondo?

Ho un DIV e vorrei mettere uno schema come sfondo. Questo modello è grigio. Quindi, per renderlo un po 'più bello, vorrei mettere un "strato" di colore trasparente chiaro. Di seguito è quello che ho provato ma che non ha funzionato. C'è un modo per posizionare il livello colorato sull'immagine di sfondo?

Ecco il mio CSS:

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

Ecco qui:

.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 per questo:

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

Ovviamente devi definire una larghezza e un'altezza per la .backgroundclasse, se non ci sono altri elementi al suo interno

So che questo è un thread molto vecchio, ma si presenta in alto in Google, quindi ecco un'altra opzione.

Questo è puro CSS e non richiede alcun HTML aggiuntivo.

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

Ci sono un numero sorprendente di usi per la funzione box-shadow.

Dai trucchi CSS ... c'è un modo in un passo per farlo senza l'indicizzazione z e l'aggiunta di pseudo elementi-- richiede un gradiente lineare che penso significhi che hai bisogno del supporto 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);
}

Puoi anche usare un gradiente lineare e un'immagine: 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');
}

Questo perché la funzione di gradiente lineare crea un'immagine che viene aggiunta alla pila di sfondo. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Prova questo. Per me va bene.

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

È quindi necessario un elemento di avvolgimento con l'immagine bg e in esso l'elemento di contenuto con il colore bg:

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

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

Ho usato questo come un modo per applicare sia le tinte di colore sia i gradienti alle immagini per rendere più semplice lo stile del testo di sovrapposizione dinamica per la leggibilità quando non puoi controllare i profili di colore dell'immagine. Non devi preoccuparti di 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);
  }

Spero che sia d'aiuto

Vedi la mia risposta su https://stackoverflow.com/a/18471979/193494 per una panoramica completa delle possibili soluzioni:

1. utilizzando più sfondi con un gradiente lineare,
2. più sfondi con un PNG generato, o
3. styling an: after pseudoelement per agire come layer di sfondo secondario.

Perché così complicato? La tua soluzione era quasi giusta tranne che è un modo più semplice per rendere trasparente il motivo e il colore di sfondo solido . Il PNG può contenere lucidi. Quindi usa Photoshop per rendere trasparente il motivo impostando il livello al 70% e salvando nuovamente l'immagine. Quindi hai solo bisogno di un selettore. Funziona su più browser.

CSS:

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

HTML:

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

Questa è la base. Un esempio di utilizzo segue dove sono passato da backgrounda background-image, ma entrambe le proprietà funziona lo stesso.

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> 

PER FAVORE ASPETTA UN MINUTO! Richiede un po 'di tempo per caricare i modelli esterni.

Questo sito web sembra essere piuttosto lento ...

Puoi usare un pixel semitrasparente, che puoi generare ad esempio qui , anche in base64 Ecco un esempio con il 50% bianco:

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

• senza caricare

• senza HTML aggiuntivo

• Immagino che il caricamento dovrebbe essere più veloce del box-shadow o del gradiente lineare

Ecco un trucco più semplice con solo 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>

Un altro con un SVG come immagine di sovrapposizione in linea (nota: se si utilizza #all'interno del codice svg è necessario urlencode quello!):

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;

Ho semplicemente usato la proprietà css di immagine di sfondo sul div dello sfondo di destinazione.
Nota: l'immagine di sfondo accetta solo funzioni di colore sfumato.
Quindi ho usato il gradiente lineare aggiungendo due volte lo stesso colore di sovrapposizione desiderato (utilizzare l'ultimo valore rgba per controllare l'opacità del colore).

Inoltre, ho trovato queste due risorse utili per:

1. Aggiungi testo (o div con qualsiasi altro contenuto) sull'immagine di sfondo: Immagine eroe
2. Sfoca solo l'immagine di sfondo, senza sfocare il div in cima: Immagine di sfondo sfocata

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

Puoi anche aggiungere opacità al tuo colore di sovrapposizione.

Invece di farlo

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

Tu puoi fare:

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

Quindi crea un nuovo stile per il colore di opacità:

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

Cambia l'opacità con il numero che vuoi sotto 1. Quindi rendi questo stile di colore della stessa dimensione della tua immagine. Dovrebbe funzionare.