我可以将不透明度属性分配给一个div的背景属性,而不是它的文本吗?
我试过了:
background: #CCC;
opacity: 0.6;
但这不会改变不透明度。
我可以将不透明度属性分配给一个div的背景属性,而不是它的文本吗?
我试过了:
background: #CCC;
opacity: 0.6;
但这不会改变不透明度。
当前回答
听起来你想要使用一个透明的背景,在这种情况下,你可以尝试使用rgba()函数:
rgba(R, G, B, A) R (red), G (green), and B (blue) can be either <integer>s or <percentage>s, where the number 255 corresponds to 100%. A (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity). RGBa example background: rgba(51, 170, 51, .1) /* 10% opaque green */ background: rgba(51, 170, 51, .4) /* 40% opaque green */ background: rgba(51, 170, 51, .7) /* 70% opaque green */ background: rgba(51, 170, 51, 1) /* full opaque green */
一个展示如何使用rgba的小示例。
截至2018年,几乎所有浏览器都支持rgba语法。
其他回答
我也有同样的问题。我想要100%透明的背景色。只需使用这段代码;这对我来说非常有效:
rgba(54, 25, 25, .00004);
你可以在这个网页的左边(联系表单区域)看到一些例子。
对于任何遇到这个线程的人,这里有一个名为thatsNotYoChild.js的脚本,我刚刚写的,它自动解决了这个问题:
http://www.impressivewebs.com/fixing-parent-child-opacity/
基本上,它将子元素与父元素分离,但将元素保持在页面上相同的物理位置。
我的技巧是创建一个透明的。png颜色和使用background:url()。
Use:
background:url("location of image"); // Use an image with opacity
此方法适用于所有浏览器。
最简单的解决方案是创建3个div。一个将包含另外两个,一个有透明背景,一个有内容。使第一个div的位置相对,并设置一个透明背景为负z-index,然后调整内容的位置,以适应透明背景。这样你就不会有绝对定位的问题。