css透明体不包括图像答案

【问题标题】：css transparent body excluding imagescss透明体不包括图像
【发布时间】：2015-08-09 01:18:28
【问题描述】：

我有这个代码

    body {
        background-color: #808080;
        background-image: url('/Content/img/emboss.png');
        background-repeat: no-repeat;
        background-position: center 250px;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: 10pt;
        opacity: 0.8;
    }
    img {
        opacity: 1;
    }

但是它不起作用。整个网站，每个元素的不透明度都是 0.8，这是我想要的，而且看起来很完美。但是，在渲染图像时，我不需要任何透明度。

我将如何在我的 css 中执行此操作

【问题讨论】：

我不认为你可以覆盖孩子的父母不透明度：stackoverflow.com/questions/21886830/…
body 中的元素可以有最大不透明度作为其父元素，.8。将opacity: .8 设置为不包含img 的元素，而不是body。
如果你不介意在正文中使用background: rgba(0, 0, 0, 0.4);
覆盖 img 的不透明度

标签： css transparency opacity

【解决方案1】：

您可以使用小技巧来实现这一点。使用:not 伪选择器，如下所示。

 body {
    background-color:#808080;
    background-image: url('/Content/img/emboss.png');
    background-repeat: no-repeat;
    background-position: center 250px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 10pt;
   }
   body :not(img)
   {
    opacity:0.7;
   }

DEMO

【讨论】：

它会起作用的。你应用了我写的相同的代码吗？
是的，复制粘贴。图像仍然是透明的，但我发现它在您的 DEMO 中有效

【解决方案2】：

这种效果不能使用 opacity 属性。而是在 body 上创建一个 div 并将其背景颜色保持为 rgba (255,255,255,0.8)，然后在该 div 中添加图像。

更改 alpha 值是将父项的不透明度与其子项分开的唯一方法。

【讨论】：