具有渐变效果的背景图像

Question

我如何重现这种效果？

如果图片是带有gradient的背景，并且其中有一个linear div，其内容是透明的，并且该内容不会继承主linear gradient的{​​{1}}

到目前为止，我做到了这一点：

div

.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;	
    -webkit-box-shadow: inset 0 0 10px 40px rgba(0,0,0,0.8);
  	box-shadow: inset 0 0 10px 40px rgba(0,0,0,0.8);	
	position: relative;
	margin: 50px 0px 80px 0px;
	left: 50%;
	transform: translateX(-50%);	
	display: flex;
	align-items: center;
	justify-content: center;*/	
	
}

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

我尝试使用<div class="wrapper_background"> <div class="content"> </div> </div>，但它只允许（据我所知）相应地调整大小。我相信有更好的方法可以做到这一点。

有什么更好的方法来实现这种效果？

Answer 1

您可以使用CSS3中的半透明边框完全执行此操作：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/3jynLgs8/