グラジエント効果のある背景画像

Question

この効果をどのように再現できますか？画像はgradientと背景で、その中にあっ透明内容とlinear div要素であり、その内容がメイン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を使用しようとしましたが、それが唯一のことができます。私はこれを行うより良い方法があると信じています。

この効果を得るにはどうすればよいでしょうか？あなたは完全にCSS3で半透明の境界線でこれを行うことができます

Answer 1

：

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