Posso impostare l'immagine di sfondo e l'opacità nella stessa proprietà?

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 - vorrei abbassare l'opacità a circa 0.2. Come posso farlo?

#main {
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
}
TylerH
Domanda modificata 3º gennaio 2019 в 8:11
Programmazione
css
15º novembre 2010 в 11:37
Non ci sono ancora visualizzazioni
#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;
}
Nisse Engström
Risposta modificata 17º settembre 2018 в 10:01
Commentari (11)
Soluzione

Due metodi:

  1. Convertire in PNG e rendere l'immagine originale 0,2 di opacità
  2. (Metodo migliore) avere un <div> che sia posizione: assoluto; prima di #main e la stessa altezza di #main, poi applicare l'immagine di sfondo e opacity: 0.2; filter: alpha(opacity=20);.
TylerH
Risposta modificata 22º settembre 2014 в 2:54
Commentari (4)

Beh, l'unico modo CSS per fare solo la trasparenza dello sfondo è tramite RGBa, ma dato che vuoi usare un'immagine ti suggerirei di usare Photoshop o Gimp per rendere l'immagine trasparente e poi usarla come sfondo.

Commentari (2)