我可以将不透明度属性分配给一个div的背景属性,而不是它的文本吗?
我试过了:
background: #CCC;
opacity: 0.6;
但这不会改变不透明度。
我可以将不透明度属性分配给一个div的背景属性,而不是它的文本吗?
我试过了:
background: #CCC;
opacity: 0.6;
但这不会改变不透明度。
当前回答
你不能。你必须有一个单独的div作为背景,这样你只能对它应用不透明度。
我最近尝试这样做,因为我已经在使用jQuery,我发现以下是最不麻烦的:
创建两个不同的div。他们会是兄弟姐妹,彼此之间没有羁绊。 给文本div一个纯背景色,因为这将是无javascript的默认值。 使用jQuery获取文本div的高度,并将其应用到背景div。
我相信有一些CSS忍者的方法来做所有这些,只有浮动或其他东西,但我没有耐心去弄清楚。
其他回答
最简单的方法是用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 >
这适用于所有浏览器
div {
-khtml-opacity: .50;
-moz-opacity: .50;
-ms-filter: ”alpha(opacity=50)”;
filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity: .50;
}
如果您不希望透明度影响整个容器及其子容器,请检查此解决方案。你必须有一个绝对定位的子节点和一个相对定位的父节点才能实现这一点。不影响子元素的CSS不透明度
在CSS不透明不影响“孩子”的地方检查一个工作演示
你不能。你必须有一个单独的div作为背景,这样你只能对它应用不透明度。
我最近尝试这样做,因为我已经在使用jQuery,我发现以下是最不麻烦的:
创建两个不同的div。他们会是兄弟姐妹,彼此之间没有羁绊。 给文本div一个纯背景色,因为这将是无javascript的默认值。 使用jQuery获取文本div的高度,并将其应用到背景div。
我相信有一些CSS忍者的方法来做所有这些,只有浮动或其他东西,但我没有耐心去弄清楚。
Use:
background:url("location of image"); // Use an image with opacity
此方法适用于所有浏览器。
对于任何遇到这个线程的人,这里有一个名为thatsNotYoChild.js的脚本,我刚刚写的,它自动解决了这个问题:
http://www.impressivewebs.com/fixing-parent-child-opacity/
基本上,它将子元素与父元素分离,但将元素保持在页面上相同的物理位置。