Question

我遇到了一个问题，我有一个背景图片我希望不透明度为0.35，我看到通过使用图像作为标签，使用绝对属性你可以欺骗CSS不具备的事实背景图像不透明度选择器。我的其他图像也设置了最大宽度，所以当我尝试时，我的所有图像都恢复到原来的巨大尺寸。这是我的代码，任何答案都会有所帮助，我还原到最大宽度图像的原始代码。

     html {
    background-image: url(*image url*);
    background-repeat: no-repeat;
    background-size: cover;

}
img {
    max-width: 100px;
    max-height: 100px;
}
.navBar {
    color: white;
    text-align: right;
}

Answer 1

background-image没有CSS不透明度属性，但您可以通过执行以下操作来实现此目的。

我将图片放在<div>下并使用以下CSS代码进行测试，然后您可以将div更改回html：

＆＃13;

div {
}

div img {
    max-width: 100px;
    max-height: 100px;
    opacity: 0.2;
}
.navBar {
    color: white;
    text-align: right;
}

＆＃13;

<div>
  <p>With opacity</p>
  <img src="http://i.imgur.com/fqAGzUd.jpg" >
  <p>Without opacity</p>
  <img src="http://i.imgur.com/fqAGzUd.jpghttp://i.imgur.com/fqAGzUd.jpg" style="opacity:1;">
</div>

＆＃13;

Answer 2

试试这个

 html {
        background-image: url(*image url*);
        background-repeat: no-repeat;
        background-size: cover;

    }
    body {
        background: rgba(255, 255, 255, 0.53);
    }

更改背景图像不透明度，不影响最大高度，最大宽度

2 个答案: