CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
user1692333
user1692333

Reputation: 2597

How to set opacity only for the parent?

My structure looks like this:

enter image description here

The situation: I need to make a transparent background. So I add opacity to the container:

.container{
  margin-top: 20px;
  margin-bottom: 15px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #d9d9de;
  opacity: 0.5
}

The main problem is that all childs also are 0.5 transparent. How to set the .box with 100% white background with no opacity?

Like this http://www.wix.com/demone2/street-photography-b#!blog/crkt Photo -> transparent block -> white block

Upvotes: 1

Views: 46

Answers (1)

lonesomeday
lonesomeday

Reputation: 237955

You can specify the colour including the alpha channel using the rgba() notation.

In this case, you could use something like background-color: rgba(255, 255, 255, 0.85) (the same settings as the site you link to). It's generally good practice to provide an rgb() alternative for browsers that don't support rgba (even though that's now fairly few).

.container{
  margin-top: 20px;
  margin-bottom: 15px;
  background-color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  border: 1px solid #d9d9de;
  opacity: 0.5
}

Upvotes: 4

Related Questions