css 不包括图像的透明主体

Question

我有这个代码

    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

中执行此操作

Answer 1

您不能为这种效果使用不透明度属性。而是在 body 上创建一个 div 并将其背景颜色保持为 rgba (255,255,255,0.8)，然后在 div.

中添加图像

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

Answer 2

您可以使用一些小技巧来实现。使用如下 :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

css 不包括图像的透明主体

css transparent body excluding images

css

transparency

opacity