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


I want to achieve this using html and css:


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

Best Solution

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

#container {
    border: solid gold 1px;   
    width: 400px;
    height: 200px;

#box {
    border: solid silver 1px;
    margin: 10px;
    width: 300px;
    height: 100px;
<div id="container">
    containter text
    <div id="box">
        box text

‚ÄčLive demo