父级 div 背景透明度

Question

我想知道是否可以影响父div的背景颜色或透明度。

我有一个带有透明白色的div：

background-color:rgba(255,255,255,0.9);

这个div包含带圆角的文本框，可以通过负透明度值来使文本框背景色的总不透明度等于0.5吗？

就像在已经透明的div中的一个圆角矩形中增加更多的透明度。

我想出了三种可能的解决方案：

1. 使父div完全透明并将div作为框架绘制在字段周围。（听起来非常复杂。）
2. 在文本框内再次添加下面的内容。（性能？）
3. 某种交集。

你认为我该怎么做？

-- 编辑 ---

我使用了解决方案#2的变体，我创建了一个png文件。这是（未调整过的）结果（单击“联系我们”以打开模态div）。由于模糊，很难看到，但窗口也是透明的。

请注意，这远非最佳解决方案，因为必须在更新其下方的内容时更新png。

- Johannes Lund

Answer 1

如果我理解正确，您想在父级div中打开一个窗口/孔。据我所知，您无法这样做，因为div在文本框后面，您应用的任何透明度都会导致div通过框显示，而不是div后面的内容。

也许，您可以将div背景设置为具有两个与文本框重合的透明孔的PNG图像，而不是背景颜色，但这就像您的解决方法一样是一个变通方法...

- xOneca

Answer 2

Johannes Lund

是的，你应该使用png图像文件，否则使用十六进制颜色编码和数学运算会变得非常复杂。

- anil tiwari

Answer 3

据我所知，应用于外部div的透明度将应用于其中的所有内容。我不确定你想要实现什么，也许你应该在jsfiddle上发布更多的代码或模型。

这是我在这个主题上找到的：http://css-tricks.com/384-non-transparent-elements-inside-transparent-elements/ 编辑：对于你的问题，我会尝试（我不确定是否有效）遵循之前发布的链接的类似解决方案。有两个分离的div，一个位于另一个上面。我建议您在上层放置带有透明输入的表单，也许这对您有所帮助？我不知道还能告诉你什么，png解决方案并不是最好的，但您可能需要在这里和那里使用png。

也许像这样：http://jsfiddle.net/XnATc/21/

- Elaine Marley

---

谢谢你的快速回复。这是一个链接，其中我尝试展示我正在寻找的效果。图片。（如果加载需要时间，我很抱歉，我的网络主机有时存在性能问题） - Johannes Lund

嗨。你链接的效果很可能是使用一个半透明白色图像作为圆角“文本框”所在的背景生成的。@Elaine 是正确的。应用了不透明度规则的元素也会影响其内部的所有元素。 - Brandon Taylor

嗨。请注意，文本框是从白色框中“剪切”的。图片上可能显示不太清楚，但文本字段上的蓝色与背景中的蓝色相同。您可以查看我的问题，我已经提供了完整效果的链接。此外，在背景颜色中使用alpha不会影响子元素。 - Johannes Lund

我不太理解你的例子。这两个框是相加，而不是相减。 - Johannes Lund

是的，你说得对，我没有多大用处，很抱歉 :S 这看起来很难修好。 - Elaine Marley

我同意，这似乎很难修复。:/ 我想一个人可以只是制作一个中间有孔的透明白色png。它仍然很难修改，但并不像我所想象的那么困难。然而，我的特殊情况是另一回事，因为涉及高斯模糊。 - Johannes Lund