CODEWITHSUNDEEP
css
Zkk
Zkk

Reputation: 751

Background-image with gradient effect

How I can reproduce this effect?

Image with grandient effect

Where image is background with a gradient and within it there is a linear div with the contents transparent and that content does not inherit the linear gradient of the main div.

So far I did this:

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

I tried to use the box-shadow, but it only allows (as far as I know) adjust the size accordingly. I believe that have better ways to do this.

What better way to do this effect?

Upvotes: 1

Views: 271

Answers (1)

wes
wes

Reputation: 734

You can do this entirely with a semi-transparent border in 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/

Upvotes: 3

Related Questions