Question

我想仅在左下角为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赋予不透明度，图像清晰度将会丢失。

Answer 1

使用PNG图像并使透明度成为图像的一部分吗？

Answer 2

赋予元素不透明度始终也会影响整个元素及其所有子元素。如果您只想给它的一个子项设置不透明度属性，则必须直接在该元素上声明它。有时您必须引入一些辅助元素来实现您想要的效果。

异常是您在颜色上声明的不透明度，这些颜色不会继承到子元素。使用新的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

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

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

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

仅在特定区域的不透明度

2 个答案: