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

您可以使用小技巧实现此目的。使用: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

Answer 2

您不能将opacity属性用于此类效果。而是在身体上创建一个div并将其背景颜色保持为rgba（255,255,255,0.8），然后在该div中添加图像。

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

css透明体不包括图像

2 个答案: