html css里设置div为50%透明，为div里面的img添加opacity：1；不透明，但显示的结果img也是透明的，

Posted 2023-05-15

你外面的DIV都透明了。那么他包含的所有元素都是透明的。你可以这么做
<div style="position:relative">
<div style="opactiy:.5;position:absulot;left:0;top:0;width:100%;height:100;">这是你要透明的DIV</div>

<img src="" style="position:absulot;left:0;top:0;width:100%;height:100;"> /><!--这个是不透明的-->

</div>
当然这种方式一点都不理想
最好的方式当然是设置

外面这个DIV 背景“色”为透明。而不是他本身透明rgba(134, 62, 62, 0.39)
如果是图片就是第一种方式。 参考技术A

透明属性是强制继承的，也就是说透明层内的子元素也必然是透明的。

解决方法：把div和img分别放在平等关系的两个层中（也就是说img不再是被div包含的），然后div设为透明，再把img通过绝对定位覆盖在div上。

还有一种办法就是用透明色来代替透明属性，比如：

<div style="background-color:rgba(255,128,128,0.5)"><img src="..."/></div>

不过如果div中是背景图片而不是单纯的填充色，那这种方法就无效了。

参考技术B 如果要实现透明边框，子元素不透明，那么就要用这个组合：filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f000000',endColorstr='#3f000000');background-color:rgba(255, 255, 255, 0.3)，但要注意这两个属性中的颜色，透明度一定要一致，这个兼容性最高，效果也最好。
startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。
其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值， GG 指定绿色值， BB 指定蓝色值，参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。
取值范围为 #FF000000 - #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。
EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。本回答被提问者和网友采纳 参考技术C img，继承了opacity属性，这个解决方法就是position把img定位在div上。图片不能放在opacity属性的div中。不考虑老浏览器的话，改用background:rgba();实现div透明就不会出现继承的问题。

CSS 为 div 的背景颜色而不是内容添加不透明度

【中文标题】CSS 为 div 的背景颜色而不是内容添加不透明度

【英文标题】：CSS Adding opacity to the background color of a div and not to the content

【发布时间】：2017-03-31 13:35:16

【问题描述】：

我正在尝试创建一个具有简单背景颜色和一些文本的 div。我想降低这个 div 的背景颜色的不透明度，但是当我这样做时，div 上的文本的不透明度也发生了变化。有没有办法只改变背景颜色的不透明度？

.main
 background-color: red; 
  width: 100%;
  height: 200px;
  opacity: 0.5;

<div class="main">
  <p>Opacity of this text shouldn't be changed.</p>
</div>

【问题讨论】：

background-color: rgba(rr, gg, bb, 0.5).

这个问题已经被问过Here。在 SO 上发布问题之前，请先尝试自己修复它，或者至少在 Google 上搜索它。我不赞成这个问题。

抱歉，我没看到。我会确保在下次提问之前进行适当的研究。 @MuhammadUsman

【参考方案1】：

您可以使用下面颜色的alpha 通道，这是RGBA 中的第四个参数

rgba(255,0,0,0.1) /* 10% 不透明红色 / rgba(255,0,0,0.4) / 40% 不透明红色 / rgba(255,0,0,0.7) / 70% 不透明红色 / rgba(255,0,0, 1) / 全不透明红色 */

注意：Red 将有255 作为第一个参数，其他作为0，您可以将第四个参数从0-1 更改为opacity

.main
 background-color: rgba(255,0,0,0.7); 
  width: 100%;
  height: 200px;
  /*opacity: 0.5;*/

<div class="main">
  <p>Opacity of this text shouldn't be changed.</p>
</div>

【讨论】：

@Harish 我更新了你的代码，你可以执行看看效果。

@Harish Red 将255 作为第一个参数，其他参数作为0，您可以从0-1 更改第四个参数

【参考方案2】：

使用的 RGBA 颜色值是具有 Alpha 通道的 RGB 颜色值的扩展 - 指定颜色的不透明度。

RGBA 代表（红、绿、蓝、alpha）

.main
 background-color: rgba(255, 0, 0, 0.5); 
  width: 100%;
  height: 200px;

<div class="main">
  <p>Opacity of this text shouldn't be changed.</p>
</div>

【讨论】：

很高兴为您提供帮助:)

【参考方案3】：

.main
 background:rgba(220,0,0,0.2);
  width: 100%;
  height: 200px;

<div class="main">
  <p>Opacity of this text shouldn't be changed.</p>
</div>

你可以像这样使用 CSS。

.main
 background:rgba(170,0,0,0.2);
  width: 100%;
  height: 200px;