透明div内的非透明div

Question

我正在创建一个具有透明div的网页。

我想在透明div中添加一个非透明div，我发现它也是透明的。

我尝试将div设置为不透明度：1但它不起作用。

我该怎么办？

Answer 1

我在研究CSS3的过程中发现了这一点并向我道歉，我无法重新调用，以便归功于合适的作者。

但如果您正在寻找div上的半透明背景纯色。不使用opacity / alpha属性设置颜色和控制透明度，而是使用rgba（rrr，ggg，bbb，aaa）格式直接设置background-color属性。这将阻止任何子元素继承任何透明度。

离。

#mydiv { background-color: rgba(128,64,0,0.75); }

Answer 2

我知道有两种方法可以解决这个问题：

• 使用透明PNG作为背景图像，在包含div上伪造透明度。
• 将div分开，使它们并排放置，然后使用相对或绝对定位来叠加它们。

Answer 3

不幸的是，这在CSS中不起作用。在过去，我使用定位将包含内容的非透明div推入透明div。我无法从我的项目中挖掘出一些旧代码，但我确实找到了这篇博文：

Non-transparent elements inside transparent elements

Answer 4

使用background，padding，background-origin来控制填充和z-index来控制元素的位置。例如：

#mydiv{ background: white; padding:100px; background-origin:border-box; z-index:1}