如何应用不透明度而不影响html / css的子元素？ [英] How to apply an opacity without affecting a child element with html/css?
本文介绍了如何应用不透明度而不影响html / css的子元素？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想使用html和css实现这一目标：
I want to achieve this using html and css:
我试图将容器的不透明度设置为0.3，框设置为1，但它不工作：两个div都有0.3透明度。
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.
我想要的效果是一个弹出框，在页面的顶部。
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).
推荐答案
据我所知，你不能做它以一种简单的方式。这里有几个选项：
1.使用绝对定位将盒子放置在容器内部。
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>
- 使用Javascript - 几乎与上述相同，不必进行硬编码。
这篇关于如何应用不透明度而不影响html / css的子元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
