我可以将不透明度属性分配给一个div的背景属性，而不是它的文本吗?
我试过了:
background: #CCC;
opacity: 0.6;
但这不会改变不透明度。
当前回答
仅适用于Less用户:
如果你不喜欢使用RGBA设置颜色，而是使用HEX，有解决方案。
你可以像这样使用mixin:
.transparentBackgroundColorMixin(@alpha,@color) {
background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}
像这样使用它:
.myClass {
.transparentBackgroundColorMixin(0.6,#FFFFFF);
}
实际上，这是内置的Less函数也提供的:
.myClass {
background-color: fade(#FFFFFF, 50%);
}
看我如何转换十六进制的颜色与rgba与少编译器?
其他回答
Use:
background:url("location of image"); // Use an image with opacity
此方法适用于所有浏览器。
最简单的解决方案是创建3个div。一个将包含另外两个，一个有透明背景，一个有内容。使第一个div的位置相对，并设置一个透明背景为负z-index，然后调整内容的位置，以适应透明背景。这样你就不会有绝对定位的问题。
仅适用于Less用户:
如果你不喜欢使用RGBA设置颜色，而是使用HEX，有解决方案。
你可以像这样使用mixin:
.transparentBackgroundColorMixin(@alpha,@color) {
background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}
像这样使用它:
.myClass {
.transparentBackgroundColorMixin(0.6,#FFFFFF);
}
实际上，这是内置的Less函数也提供的:
.myClass {
background-color: fade(#FFFFFF, 50%);
}
看我如何转换十六进制的颜色与rgba与少编译器?
最简单的方法是用2个div, 1个是背景，1个是文本:
#{容器 位置:相对; 宽度:300 px; 身高:200 px; ｝ #块{ 背景:# CCC; 过滤器:α(不透明度= 60); /* ie */ -moz-opacity: 0.6; /* Mozilla */ 透明度:0.6; /* css3 */ 位置:绝对的; 上图:0; 左:0; 高度:100%; 宽度:100%; ｝ #{文本 位置:绝对的; 上图:0; 左:0; 宽度:100%; 高度:100%; ｝ < div id = "容器" > < div id = "块" > < / div > < div id = " text " > < / div >测试 < / div >
我的技巧是创建一个透明的。png颜色和使用background:url()。
