2

我只想在左下角为 div 赋予不透明度。是否可以？如何？

<div id="right_img"></div>

css

#right_img
{
     float:right;
     width:600px;
     height:400px;
     margin-top:100px;
     background:url(../images/assets/sobrf-maria-page.jpg) no-repeat bottom center;
     opacity:0.6;
     filter:alpha(opacity=60); 
}

如果我给完整的 div 赋予不透明度，图像清晰度将会丢失。

4

2 回答 2

3

改用PNG图像并使图像的透明度部分？

于 2012-07-31T07:49:48.627 回答
2

为元素赋予不透明度总是会影响整个元素及其所有子元素。如果你只想给它的一个子元素 opacity 属性，你必须直接在那个元素上声明它。有时你必须引入一些辅助元素来达到你想要的效果。

例外是您在不继承到子元素的颜色上声明的不透明度。使用新的rgba()声明，（第四个参数是颜色的不透明度），您可以实现像“透明” div（透明背景）但字体完全不透明的效果。

rgba在您的情况下，仅使用带有此背景颜色的正常背景声明就足够了（解释您的答案-不太清楚） ：

#right_img{
   background:rgba(x,y,z,0.6) url(../images/assets/sobrf-maria-page.jpg) no-repeat bottom center;
}

x,y,z = 0...255和_a = 0...1

请注意，rgba()旧 IE（甚至 IE8！）不支持该声明。你需要一个过滤器来支持这些。幸运的是有一个：

filter:progid:DXImageTransform.Microsoft.gradient(
           startColorstr=#aaxxyyzz,
           endColorstr  =#aaxxyyzz);

其中第一个参数 (a) 是 和 的不0% = 00透明度100% = FF。和xx,yy,zz = 00...FF。

于 2012-07-31T07:41:13.157 回答