我所拥有的是一个带有背景图像的 div,在这样的 div 中我有另一个更小且背景颜色为白色的元素。在这个元素里面我有我不想透明的文本,所以我们可以看到第一个 div 的背景图像。
尝试申请color: transparent;
,但似乎不起作用。是否有可靠的 css 方法来实现这一点?
你不能。做这样的事情的唯一方法是让“带文本的背景”成为您放在背景图像顶部的图像。
实际上,这仅适用于 CSS。在带有白色背景的较小元素中,您可以将 CSS3 与 IE 6-8 的后备一起使用。对于后备,您可以使用透明的 PNG。
白色 bg 的 CSS3 代码将是:
background-color: rgba(255,255,255,0.5)
我为您设置了一个 codepen 以查看运行中的代码。 http://codepen.io/DheerG/pen/tkkqC
此外,如果您希望较小元素中的所有内容都是透明的,则可以只使用 cssopacity
元素。
opacity: 0.6;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
/* IE 5-7 */
filter: alpha(opacity=60);