html - 无法强制小图像继承父元素的透明度

Question

我正处于为客户开发网站的最后阶段，我很难弄清楚如何防止小花图像继承其父元素的透明度。

我首先尝试使图像独立，在 css 中使用绝对定位。这奏效了；但是，它引入了对齐问题，具体取决于浏览器窗口的大小和显示器的大小以及操作系统。我能够通过添加浏览器选择 javascript 并添加必要的 css 代码来检查每个浏览器来消除(某种程度上)浏览器问题，但我仍然遇到对齐问题，具体取决于浏览器窗口的大小和监控荧幕。

要查看独立 float (花图)的页面，请看以下网址:

mauisunsetb122.com/index5.html

然后我决定将图像与相邻的文本联系起来，这样无论浏览器窗口或显示器的大小如何，图像都将始终锚定在文本上。这就是透明度问题发生的地方。要查看此示例，请查看以下网址:

mauisunsetb122.com/index5_8.html

我尝试按照以下网址中的示例解决问题，但没有成功:

http://blog.ninanet.com/2010/04/27/css-transparency-inheritance-hack

在此先感谢您的协助!

Answer 1

如果您希望使背景透明并且不让子元素继承它，那么您有多种选择:

1. 使用透明的小 PNG 作为背景图片。
2. 使用 rgba 'background-color: rgba(255,255,255,0.5);'设置背景色
3. 使用可怕的 css hack

Generaly 1 似乎是最常用和受支持的。