我想通过使用不透明度使列表菜单的背景消失,而不影响字体。CSS3可能吗?
Answers:
现在您可以在CSS属性中使用rgba,如下所示:
.class {
background: rgba(0,0,0,0.5);
}
0.5是透明度,根据您的设计更改值。
rgba('black', 0.5)
?
这是一个使用CSS的示例类,命名为colors:
.semi-transparent {
background: yellow;
opacity: 0.25;
}
这将添加25%不透明(彩色)和75%透明的背景。
CAVEAT
不幸的是,不透明度会影响它所附着的整个元素。
因此,如果该元素中包含文本,它也会将文本设置为25%不透明度。:-(
解决此问题的方法是使用rgba
或hsla
方法将透明度指示为所需背景“颜色”的一部分。这使您可以指定背景透明度,而与元素中其他项目的透明度无关。
以下是将蓝色背景设置为75%透明度而不影响其他元素的三种方法:
background: rgba(0%, 0%, 100%, 0.75)
background: rgba(0, 0, 255, 0.75)
background: hsla(240, 100%, 50%, 0.75)
在这种情况下background-color:rgba(0,0,0,0.5);
是最好的方法。例如:background-color:rgba(0,0,0,opacity option);
为此,您必须修改background-color
的元素。
创建(半)透明颜色的方法:
CSS颜色名称transparent
创建完全透明的颜色。
用法:
.transparent{
background-color: transparent;
}
使用rgba
或hsla
颜色功能,可以将Alpha通道(不透明度)添加到rgb
和hsl
功能。它们的alpha值范围是0-1。
用法:
.semi-transparent-yellow{
background-color: rgba(255, 255, 0, 0.5);
}
.transparent{
background-color: hsla(0, 0%, 0%, 0);
}
除了已经提到的解决方案之外,您还可以使用带有alpha值(#RRGGBBAA
或#RGBA
表示法)的HEX格式。
这是很新的(由CSS Color Module Level 4包含),但是已经在较大的浏览器中实现(对不起,没有IE)。
这与其他解决方案不同,因为它将alpha通道(不透明度)也视为十六进制值,使其范围为0-255(FF
)。
用法:
.semi-transparent-yellow{
background-color: #FFFF0080;
}
.transparent{
background-color: #0000;
}
您也可以尝试一下:
transparent
:rgba()
:#RRGGBBAA
:innerHTML =
(嘿,至少它比警报好,并且document.write
它们在2012年曾经使用过,但是在jQuery教程之外,仍然没有DOM操作,除了教程的一点,他们在每章中列出了相关的方法,甚至只是选择了它。 -是的,它们确实列出document.write
)。他们的XHR教程使用readyStateChange而不是onLoad(从IE7开始受支持)。哦,还有针对JSON函数的解决方法?将它们串起来以待稍后评估
是的,您可以将纯文本作为
.someDive{
background:transparent
}