0

enter image description here

Lets use this for example. So you can see here red div inside of green div. How can I make background of green div to have opacity, but at the same time red divs content/background keeps full visibility.

Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
Aco
  • 37
  • 1
  • 7

1 Answers1

1

If I understand what you're asking for correctly, you can use an rgba() value as the green div's background color:

.green {
  height: 400px;
  background: rgba(83,210,103,0.5);
  }
.red {
  height: 200px;
  background-color: red;
  width: 80%;
  margin: 0 auto;
  }
<div class="green">
  GREEN
  <div class="red">
    RED
  </div>
</div>

rgba() takes the three normal values of red, green, blue (rgb) as well as an alpha value with 1 being default opaque, 0.5 half-opaque, etc.

David Wilkinson
  • 5,060
  • 1
  • 18
  • 32
  • I used green only as example,What if i want to make patternt transparent ? – Aco Feb 25 '16 at 15:44
  • 1
    @Aco Ah, after re-looking at your above comment, you'll want to check the following out: [http://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements](http://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements) – David Wilkinson Feb 25 '16 at 15:53