How to apply an opacity without affecting a child element with html/css?

Question

I want to achieve this using html and css:

schema

I have tried to set the opacity of the container to 0.3 and the box to 1, but it doesn't work: both divs have 0.3 opacity.

jsFiddle of my try here

The effect I am trying to achive is a popup box that comes on top of the page. It is highlighted by fading the content below (by lowering the opacity).

Possible duplicate of [CSS - Opaque text on low opacity div?](http://stackoverflow.com/questions/2401953/css-opaque-text-on-low-opacity-div) — Félix Adriyel Gagnon-Grenier, Mar 22 '16 at 01:07
@FélixGagnon-Grenier I don't think that this solution will benefit OP since he'll probably want to fade the content too. — xpy, Mar 22 '16 at 07:51

score 103 · Answer 1 · edited May 10 '19 at 16:49

103

You can use opacity in combination with background color, like this:

#container {
    border: solid gold 1px;   
    width: 400px;
    height: 200px;
    background:rgba(56,255,255,0.1);
}

#box {
    border: solid silver 1px;
    margin: 10px;
    width: 300px;
    height: 100px;
    background:rgba(205,206,255,0.1);
}

<div id="container">
    containter text
    <div id="box">
        box text
    </div>
</div>

Live demo

edited May 10 '19 at 16:49

GSerg

76,472
17
159
346

answered Apr 05 '12 at 05:04

Rohit Azad Malik

31,410
17
69
97

This answer is really good. However, can you provide some details about browser compatibility with this method? – Sparky Mar 31 '13 at 00:09
4

@Sparky Here you go http://caniuse.com/#search=rgba ~ At the time of writing this has 85.51% browser support. – schalkneethling Nov 04 '13 at 11:51
6

This isn't really an answer. It doesn't really change the opacity, it changes the background color. – NonameSL Oct 12 '16 at 20:41
ie8 does not exist rgba() – WantToDo Mar 19 '17 at 11:59
Nice workaround, but only if you want to add opacity to things whose color is defined by you in CSS. If that is the case and you need to add opacity to multiple different colors [custom CSS properties can make it easier](https://stackoverflow.com/q/6962432/1494454). – totymedli Apr 23 '18 at 04:09
This should be the accepted answer, it is the simplest and most effective. It can be easily replaced with `color:` instead of `background-color:` if you're objective with this is different. – Jake Apr 04 '19 at 11:41
Will this work if I want to add opacity to a background-image? – Dror Bar Oct 13 '20 at 13:02

score 22 · Accepted Answer · edited Jun 20 '20 at 09:12

22

As far as I know you can't do it in a simple way. There a couple of options here:

Use absolute positioning to position box "inside" the container.

#container {
    opacity: 0.3;
    background-color: #777788;
    position: absolute;
    top: 100px;
    left: 100px;
    height: 150px;
    width: 300px;
}
#box {
    opacity: 1;
    background-color: #ffffff;
    position: absolute;
    top: 110px;
    left: 110px;
    height: 130px;
    width: 270px;
}

<div id="container"></div>
<div id="box">
    <p>Something in here</p>
</div>

Use Javascript - almost the same as above, but position and size don't have to be hardcoded.

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 05 '12 at 00:59

Ilia Frenkel

1,969
13
19

2

Just fyi, I think the numbering is off a lil'. – Whymarrh Apr 05 '12 at 01:03
24

This is not a solution as the box is no longer a child of the container. – Griffin Apr 05 '12 at 01:03
1

Another option might be to use jQuery UI Dialog (http://jqueryui.com/demos/dialog) – Ilia Frenkel Apr 05 '12 at 01:10
Ilia, do you have any link(s) to give a hint about using javascript for this? I have 50% opaque parent
's containing child images which I want 100% opaque. Setting the
to `position:relative;` & the img to `position:absolute;` does NOT allow me to override the inherited opacity on the img, and I can't use absolute positioning for the
's themselves (that's a mess ;-). In Javascript I tried `imgs[i].style.opacity = '1';`, but that also does not work to override the inherited opacity. If I understand correctly, I also can't use rgba because I need to affect the img, not just a color.

govinda

May 14 '12 at 21:04

Since this does not answer's the opacity problem for a child element, its not a correct answer – Nishant Patel May 05 '20 at 05:27

1

@NishantPatel I've provided a possible solution to the problem. It was up to the question's original author to either accept it or reject it. In addition, it was 8 years ago! A lot has changed on the web since eight years ago :-) – Ilia Frenkel May 06 '20 at 06:08

@I Agreed its a fairly old post. – Nishant Patel May 06 '20 at 07:42

score 10 · Answer 3 · answered Jul 27 '20 at 09:55

You can't apply an opacity property without affecting a child element!

"Opacity applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, the element and its children all have the same opacity relative to the element's background, even if they have different opacities relative to one another... If you do not want to apply opacity to child elements, use the background property instead." https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

If you want the opacity to be applied only to the background, without affecting the child elements, use:

background-color: rgba(255, 255, 255, .3)

However, you can achieve the desired effect if you place them inside a div parent element and use CSS position property:

.parent {
  border: solid green 3px;
  position: relative;
  width: 400px;
  height: 200px;
}

.sibling-one {
  border: solid red 3px;
  position: absolute;
  box-sizing: border-box;
  width: 400px;
  height: 200px;
  opacity: .3;
 }

.sibling-two {
    border: solid blue 1px;
    margin: 10px;
    width: 200px;
    height: 100px;
    position: absolute;
    transform: translateY(50%);
}

<div class="parent">
  <div class="sibling-one">
  <p>A sibling's one element</p>
</div>
<div class="sibling-two">
    <p>A sibling's two element</p>
</div>
</div>

Jon Bennett · Answer 4 · 2018-01-14T13:38:44.050

Try using rgba as a 'pre content' overlay to your image, its a good way to keep things responsive and for none of the other elements to be effected.

header #inner_header_post_thumb {
  background-position: center;
  background-size: cover;
  position: relative;
  background-image: url(https://images.pexels.com/photos/730480/pexels-photo-730480.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
  border-bottom: 4px solid #222;
}

header #inner_header_post_thumb .dark_overlay {
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.75);
}

header #inner_header_post_thumb .dark_overlay .container .header-txt {
  padding-top: 220px;
  padding-bottom: 220px;
  color: #ffffff;
  text-align:center;
}

header #inner_header_post_thumb .dark_overlay .container .header-txt h1 {
  font-size: 40px;
  color: #ffffff;
}

header #inner_header_post_thumb .dark_overlay .container .header-txt h3 {
  font-size: 24px;
  color: #ffffff;
  font-weight: 300;
}

header #inner_header_post_thumb .dark_overlay .container .header-txt p {
  font-size: 18px;
  font-weight: 300;
}

header #inner_header_post_thumb .dark_overlay .container .header-txt p strong {
  font-weight: 700;
}

<header>
  <div id="inner_header_post_thumb">
    <div class="dark_overlay">
      <div class="container">
        <div class="row header-txt">
          <div class="col-xs-12 col-sm-12">
            <h1>Title On Dark A Underlay</h1>
            <h3>Have a dark background image overlay without affecting other elements</h3>
            <p>No longer any need to re-save backgrounds as .png ... <strong>Awesome</strong></p>

          </div>
        </div>
      </div>
    </div>
  </div>
</header>

See a working codepen here

This answer is better as it retains the cascade – Stef Geysels Mar 05 '18 at 16:29 — Stef Geysels, Mar 05 '18 at 16:29

score 7 · Answer 5 · answered May 09 '18 at 07:33

7

Using background-color: rgba(#777788, 0.3); instead of opacity could maybe fix the problem.

answered May 09 '18 at 07:33

Claudio

207
3
4

3

`rgba` has not this sintax but `rgba(255,0,0,0.3);` – DaFois May 09 '18 at 07:54
@DaFois is correct but the answer did solve my issue. – FllnAngl Sep 17 '18 at 09:53

score 2 · Answer 6 · answered Apr 05 '12 at 01:04

Apply this css rule

.alpha60 { 

/* Fallback for web browsers that doesn't support RGBa */ 

background: rgb(0, 0, 0); 

/* RGBa with 0.6 opacity */ 

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

/* For IE 5.5 - 7*/ 

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,      endColorstr=#99000000); 

/* For IE 8*/ 

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,     endColorstr=#99000000)"; 
}

In addition to this, you have to declare background: transparent for IE web browsers.

For more details visit the following link:

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

@Bojangles, please read the OP again... the OP _only_ wants a transparent background, and this answer, although a bit sloppy, provides a link to a great workaround. — Sparky, Mar 31 '13 at 00:15

score 2 · Answer 7 · answered Mar 07 '20 at 01:47

Opacity will always inherits by the child element regardless whatever the element in there, there is no workaround up to today have suggested, when the moving of the child element outside the transparency background is not an option like in a popup menu/dialog box creation, use of background with the rgba is the solution.

Here is a input box that i created that i can turn on or off with the class property invisible by javascript

<div id="blackout" class="invisible">
    <div id="middlebox">
        <p>Enter the field name: </p>
        <input type="text" id="fieldvalue" />
        <input type="button" value="OK" id="addfname" />
    </div>
</div>

CSS

#blackout {
    z-index: 9999;
    background: rgba(200, 200, 200, 0.6); 
    height: 100%;
    width: 100%;
    display: block;
    padding: 0px;
    clear: both;
    float: left;
    position: absolute;
    margin-top: -10px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: -10px;
}

#blackout #middlebox {
    border: thick solid #333;
    margin: 0px;
    height: 150px;
    width: 300px;
    background-color: #FFF;
    top: 50%;
    left: 50%;
    position: absolute;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 10px 50px 0px 50px;

}

#middlebox p {
    float: left;
    width:100%;
    clear:both;
}

#middlebox input {
    clear:both;
    margin-bottom:10px;
}

#middlebox input[type=text]{
    width:100%;
}

#middlebox input[type=button]{
    float:right;
    width:30%;
}

.invisible{
    visibility:hidden !important;
}

score 2 · Answer 8 · answered Jul 27 '20 at 08:04

Use such elements that you can add :before or :after. My solution

<div class="container">
    <div>
         Inside of container element is not effected by opacity. 
    </div>
</div>

Css.

.container{
    position: relative;
}

.container::before{
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #000000;
    opacity: .25
}

score 1 · Answer 9 · answered Apr 05 '12 at 00:58

Any child of an element with opacity set will take on that opacity.

To achieve this style you could use rgba colours and filters for IE for the background, and opacity on the textual elements. So long as the second box isn't a child of one of the text elements, then it won't inherit the opacity.

Brian D. · Answer 10 · 2018-04-04T16:02:28.580

Another workaround is to simply use an overlay background to create a similar effect.

I personally like a black overlay with about a 65% opacity, but for what you are trying to do you may want to use a white overlay at round 70%.

Create a small (100 x 100 or less) PNG in Photoshop or GIMP that has the color and opacity you want. Then just set that as the background of your light box.

If you create multiple PNGs at different opacities you can easily switch between them with JS or dynamically at load via backend scripting.

It's not technically what you are trying to do, but aesthetically it can give a very similar effect and UX wise accomplishes the same thing. It is also very easy to do, and widely supported across pretty much everything.

score 0 · Answer 11 · answered May 06 '14 at 19:31

This might not be the most orthodox method but you can use a small semi-transparent background image for each div / container that repeats. It does seem that in this day and age you should be able to achieve this in pure (simple not hackish) css with no js but as the answers above show it isn't that straight forward...

Using a tiled image might seem dated but will work no worries across all browsers.

score 0 · Answer 12 · answered Aug 16 '19 at 10:00

0

You can add a container's sibling absolutely positioned behind container, with the same size, and apply opacity to it.

And use no background on your container.

Now container's children have no opaque parent and the problem vanishes.

answered Aug 16 '19 at 10:00

Mikhail Batcer

1,938
7
37
57

How to apply an opacity without affecting a child element with html/css?

12 Answers12

Linked

Related