仅在特定区域的不透明度

Posted 2023-03-06

【中文标题】仅在特定区域的不透明度

【英文标题】：Opacity only at a particular area

【发布时间】：2012-07-28 22:31:12

【问题描述】：

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

【问题讨论】：

我不认为可以使用 CSS 为元素的特定区域赋予不透明度，除非您使用带有 RGBA 的 CSS 宏。也许你有一个你想要完成的例子，比如一个模型？

使用 html5 canvas 和 javascript 来做这些事情。

【参考方案1】：

改用 PNG 图像并让图像成为透明部分？

【参考方案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

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

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

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