具有漸變效果的背景圖像

Question

如何重現此效果？

如果圖像是背景與gradient並在其中有一個linear分度，內容透明，內容不繼承主div的linear gradient。

到目前爲止，我這樣做：

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

我試圖用box-shadow，但只允許（據我所知），相應地調整大小。我相信有更好的方法來做到這一點。

有什麼更好的方法來做到這一點？

Answer 1

可以完全用半透明邊框在CSS3做到這一點：

.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/