Hintergrundbild Transparenz in DIV

Question

Ich versuche, ein Hintergrundbild transparent zu machen (keine Option, um ein transparentes PNG oder helleres Bild zu machen, die Bilder werden oft geändert).

background: url(image.jpg) no-repeat center center/cover; 
opacity: 0.2; 

Got das Bild funktioniert, aber alles innerhalb der DIV ist auch transparent. Ich habe nach einer Lösung gesucht, kann aber nicht die richtige implementieren. Irgendein Zeiger auf, wie man das repariert?

Answer 1

Verwenden Sie die Opazität auf dem Hintergrund div innerhalb des Wrapperelements.

.page { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.page::before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url('http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg'); 
 
    opacity: 0.2; 
 
    z-index: -1; 
 
} 
 
.box { 
 
    display: inline; 
 
    background: red; 
 
}

<div class="page"> 
 
    My page 
 
    <div class="box">Red box</div> 
 
</div>

Answer 2

Sie können CSS linear-gradient() mit rgba() verwenden.

div { 
 
    width: 300px; 
 
    height: 200px; 
 
    background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg"); 
 
} 
 
span { 
 
    background: black; 
 
    color: white; 
 
}

<div><span>Hello world.</span></div>

jsFiddle

Erläuterung:

• Der erste Teil: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) schafft eine halbtransparenten weiße Hintergrundfarbe. Sie können den Alpha-Parameter bei Bedarf zwischen 0 (vollständig transparent) und 1 (vollständig undurchsichtig) ändern.

• Der zweite Teil: url("https://i.imgur.com/xnh5x47.jpg") soll das tatsächliche Hintergrundbild anzeigen.

• Zusammen: background: linear-gradient(...), url(...); erstellt mehrere Hintergründe, zwei von ihnen sind gestapelt, die erste deckt die zweite.

Answer 3

können Sie ein Pseudo-Elem verwenden

div { 
 
     width: 300px; 
 
     height: 200px; 
 
     color: green; 
 
     position: relative; 
 
    } 
 

 
    div:before{ 
 
     background: url(https://i.imgur.com/xnh5x47.jpg); 
 
     content: ""; 
 
     z-index: -1; 
 
     position: absolute; 
 
     opacity: 0.5; 
 
     top: 0; bottom: 0; left: 0; right: 0; 
 
     background-size: cover; 
 
    }

<div> LOLOLOL </div>