How to apply an opacity without affecting a child

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

标签： html css opacity

8条回答

爷的心禁止访问

2楼-- · 2019-01-11 06:22

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.

0人赞添加讨论(0) 举报

Viruses.

3楼-- · 2019-01-11 06:23

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/

0人赞添加讨论(0) 举报

Luminary・发光体

4楼-- · 2019-01-11 06:28

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

0人赞添加讨论(0) 举报

Animai°情兽

5楼-- · 2019-01-11 06:34

Hi you can used opicity with background color as like this

css

#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);
}

HTML

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

Live demo http://jsfiddle.net/rohitazad/yT6nG/29/

0人赞添加讨论(0) 举报

时光不老，我们不散

6楼-- · 2019-01-11 06:35

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.

0人赞添加讨论(0) 举报

女痞

7楼-- · 2019-01-11 06:45

As far as I know you can't do it in a simple way. There a couple of options here: 1. Use absolute positioning to position box "inside" the container.

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            #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;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <div id="box">
            <p>Something in here</p>
        </div>
    </body>
</html>

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

0人赞添加讨论(0) 举报

1 2 下一页

How to apply an opacity without affecting a child

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间