对抗 div 不透明度？

Question

如果我有一个像盒子一样的div，而且我用10%的透明度使它看起来很性感。但是因为div中的所有内容也会变得透明，所以如何解决这个问题呢？假设我有一个带有1像素边框和文本的盒子(div)，将其设置为透明度会使它看起来很糟糕，我只想在背景上使用透明度。

- Jason94

Answer 1

这是如何仅对背景颜色应用不透明度，而不影响整个元素及其子元素的方法：

background: rgba(0,0,0, 0.5) //gives you a black background with 50% opacity

你可以在这里测试： http://jsfiddle.net/ypaTH/

这里有一个类似的问题： 如何在各个浏览器中实现元素背景的跨浏览器透明？（包括IE版本）

- meo

---

这个（虽然是“正确”的解决方案和CSS3功能）仅在像Chrome、Firefox、Safari这样的现代浏览器中有效。 - Christian Studer

你可以在我之前回答的上一个主题中找到IE版本。 - meo

透明度在IE中不起作用，所以我认为他不会在意。 - meo

Answer 2

具有不透明度的元素内容会继承该不透明度。您需要将其分成两个部分：背景和内容。将内容绝对定位在背景上方。您的内容不能在不透明度元素内。

- Diodeus - James MacFarlane

---

如果你在谈论CSS属性opacity，那么这是正确的，但还有其他几种实现该效果的方法。 - e100

Answer 3

您可以使用半透明的PNG图像作为元素的背景。对于IE6支持，您需要像Supersleight这样的修复程序。

- e100

---

因为有各种浏览器类型，如果我不使用类似jQuery之类的库（如果它具备我需要的功能），我认为PNG是最好的选择。感谢大家的回答！ - Jason94