Hintergrundbild mit Farbverlaufseffekt

Question

Wie kann ich diesen Effekt reproduzieren?

Wo Bild ist Hintergrund mit einem gradient und in er gibt es einen linear div mit dem Inhalt transparent ist und dass Inhalte erben nicht die linear gradient des Haupt div.

Bisher habe ich dies:

.wrapper_background{ 
 
\t width: 500px; 
 
\t height: 300px; 
 
\t background-image: url('http://www.cvc.com.br/media/6016178/galeria-salvador-elevador_lacerda_017-credito-divulga%C3%A7%C3%A3ocvc.jpg'); 
 
\t background-size: cover; 
 
\t background-position: center; \t 
 
    -webkit-box-shadow: inset 0 0 10px 40px rgba(0,0,0,0.8); 
 
    \t box-shadow: inset 0 0 10px 40px rgba(0,0,0,0.8); \t 
 
\t position: relative; 
 
\t margin: 50px 0px 80px 0px; 
 
\t left: 50%; 
 
\t transform: translateX(-50%); \t 
 
\t display: flex; 
 
\t align-items: center; 
 
\t justify-content: center;*/ \t 
 
\t 
 
} 
 

 
.content{ 
 
\t width: 80%; 
 
\t height: 80%; 
 
\t border-radius: 25px; \t 
 
\t overflow: hidden; 
 
\t border: 1px solid black; 
 
\t background-color: transparent; 
 
}

<div class="wrapper_background"> 
 
\t <div class="content"> \t \t 
 
\t </div> 
 
</div>

ich die box-shadow zu verwenden versucht, aber es erlaubt nur (soweit ich weiß) die Größe entsprechend anpassen. Ich glaube, dass es bessere Möglichkeiten dafür gibt.

Gibt es einen besseren Weg diesen Effekt zu erzielen?

Answer 1

Sie können dies mit einem halbtransparenten Grenze in CSS3 vollständig tun:

.wrapper_background { 
 
    width: 500px; 
 
    height: 300px; 
 
    background-image: url('http://www.cvc.com.br/media/6016178/galeria-salvador-elevador_lacerda_017-credito-divulga%C3%A7%C3%A3ocvc.jpg'); 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 
.content { 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 50px solid rgba(0, 0, 0, 0.4); 
 
    box-sizing: border-box; 
 
    overflow: hidden; 
 
}

<div class="wrapper_background"> 
 
    <div class="content"> 
 
    </div> 
 
</div>

https://jsfiddle.net/3jynLgs8/