CODEWITHSUNDEEP
htmlcss
tomassilny
tomassilny

Reputation: 1121

Div on image should be transparent

I have a problem with this:

image

On image (with flower) I have this CSS code:

background:rgba(0, 0, 0, 0.4);

And I want place in square div transparent so without rgba opacity (To be part of a flower in a div without darkening). How can I do it? Thanks for every answer.

Upvotes: 2

Views: 36

Answers (2)

Nenad Vracar
Nenad Vracar

Reputation: 122027

You can create overlay with :after pseudo element and use box-shadow.

div {
  background: url('http://media02.hongkiat.com/ww-flower-wallpapers/roundflower.jpg');
  background-size: cover;
  width: 400px;
  height: 250px;
  position: relative;
  overflow: hidden;
}
div:after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  bottom: 50px;
  right: 50px;
  box-shadow: 0px 0px 0px 500px rgba(0, 0, 0, 0.4);
}
<div></div>

You can also use svg

div {
  background: url('http://media02.hongkiat.com/ww-flower-wallpapers/roundflower.jpg');
  background-size: cover;
  width: 400px;
  height: 250px;
  position: relative;
  overflow: hidden;
}
svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.overlay {
  opacity: 0.4;
}
<div>
  <svg viewBox="0 0 400 250">
    <path class="overlay" d="M347.065,200.282H247.71V93.428h99.355V200.282z M400,0H0v250h400V0z" />
  </svg>
</div>

Upvotes: 2

satya
satya

Reputation: 1185

Please try this:

div {
    background-color:transparent;
border:4px solid black
}

Upvotes: 0

Related Questions