CSS: imposta l’immagine di sfondo con opacità?

Quindi, posso vedere nei riferimenti CSS come impostare la trasparenza dell’immagine e come impostare un’immagine di sfondo . Ma come posso combinare questi due per impostare un’immagine di sfondo trasparente?

Ho un’immagine che vorrei usare come sfondo, ma è troppo luminosa: mi piacerebbe ridurre l’opacità a circa 0,2. Come posso fare questo?

#main { background-image: url(/wp-content/uploads/2010/11/tandem.jpg); } 

Due metodi:

  1. Converti in PNG e crea l’opacità dell’immagine originale 0.2
  2. (Metodo migliore) avere un

    che è la position: absolute; prima di #main e della stessa altezza di #main , quindi applica l’immagine di sfondo e l’ opacity: 0.2; filter: alpha(opacity=20); opacity: 0.2; filter: alpha(opacity=20); .

 #main { position: relative; } #main:after { content : ""; display: block; position: absolute; top: 0; left: 0; background-image: url(/wp-content/uploads/2010/11/tandem.jpg); width: 100%; height: 100%; opacity : 0.2; z-index: -1; } 

Soluzione con 1 div e nessuna immagine trasparente:

Puoi utilizzare la funzione CSS3 di multibackground e inserire due sfondi: uno con l’immagine, l’altro con un pannello trasparente su di esso (perché penso che non sia ansible impostare direttamente l’opacità dell’immagine di sfondo):

 background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(bg.png) repeat 0 0, url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0; background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.7))), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0; background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0; background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0; background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0; background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0; 

Non puoi usare rgba(255,255,255,0.5) perché da solo è accettato solo sul retro, quindi per questo esempio ho usato gradienti generati per ogni browser (ecco perché è così lungo). Ma il concetto è il seguente:

 background: tranparentColor, url("myImage"); 

http://jsfiddle.net/pBVsD/1/

se è necessario impostare il gradiente solo sull’immagine di sfondo :

 background-image: url(IMAGE_URL); /* fallback for older browsers */ background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%), url(IMAGE_URL); 

Ho visto questo e in CSS3 è ora ansible inserire il codice in questo modo. Diciamo che voglio che copra tutto lo sfondo, farei qualcosa di simile. Quindi con hsla(0,0%,100%,0.70) o rgba si utilizza uno sfondo bianco con qualsiasi percentuale di saturazione o opacità per ottenere l’aspetto desiderato.

 .body{ background-attachment: fixed; background-image: url(../images/Store1.jpeg); display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background-color: hsla(0,0%,100%,0.70); background-blend-mode: overlay; background-repeat: no-repeat; } 

Puoi usare il CSS psuedo selector :: after per ottenere questo. Ecco una demo funzionante.

inserisci la descrizione dell'immagine qui

 .bg-container{ width: 100%; height: 300px; border: 1px solid #000; position: relative; } .bg-container .content{ position: absolute; z-index:999; text-align: center; width: 100%; } .bg-container::after{ content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index:99; background-image: url(https://i.stack.imgur.com/Hp53k.jpg); background-size: cover; opacity: 0.4; } 
 

Background Opacity 0.4

Ho usato la risposta di @Dan Eastwell e funziona molto bene. il codice è simile al suo codice ma con qualche aggiunta

  .granddata { position: relative; margin-left :0.5%; margin-right :0.5%; } .granddata:after { content : ""; display: block; position: absolute; top: 0; left: 0; background-image: url("/Images/blabla.jpg"); width: 100%; height: 100%; opacity : 0.2; z-index: -1; background-repeat: no-repeat; background-position: center; background-attachment:fixed; } 

Nel tuo CSS aggiungi …

  filter: opacity(50%); 

In JavaScript usa …

  element.style.filter='opacity(50%)'; 

NB: aggiungi i prefissi dei fornitori come richiesto ma Chromium dovrebbe funzionare senza.

Un ottimo modo per farlo per un’immagine semplice è farlo usando solo i CSS per impostare lo sfondo dell’elemento HTML in questo modo.

 HTML { background: url('http://www.earthtimes.org/newsimage/eat-lead-by-example-obesity-expert-tells-parents_139.jpg'); width: 100%; height: 100%; } 

Beh, l’unico modo CSS di fare solo la trasparenza dello sfondo è tramite RGBa ma dal momento che si desidera utilizzare un’immagine, suggerirei di usare Photoshop o Gimp per rendere l’immagine trasparente e quindi utilizzarla come sfondo.

Dal momento che non mi piace né usare un png (proabilmente più pesante del jpg) né un elemento extra per impostare un’opacità e considerando che questo sarebbe un enigma di presentazione, allora suggerisco di provare i JPEG con Alpha Channels , una tecnica che usa la canvas.

Forse potrebbe essere una buona tecnica da implementare anche se non so se è applicabile nel tuo caso specifico.

Ho appena aggiunto position = absolute, top = 0, width = 100% in #main e ho impostato il valore di opacity su #background

 #main{height:100%;position:absolute; top:0;width:100%} #background{//same height as main;background-image:url(image URL);opacity:0.2} 

Ho applicato lo sfondo a un div prima del principale.

Mi sono imbattuto in questo post perché ho avuto lo stesso problema, quindi ho pensato perché scherzare con css, regolare i valori e premere il refresh quando è ansible regolare facilmente l’opacità in Photoshop? Copia l’immagine, incollala come nuovo livello, quindi sposta il cursore dell’opacità.

Ho avuto un problema simile e ho appena preso l’immagine di sfondo con Photoshop e creato un nuovo file .png con l’opacità di cui avevo bisogno. Problema risolto senza preoccuparsi se il mio CSS ha funzionato su tutti i dispositivi e browser