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

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：

div { 
 
} 
 

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

<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>

Answer 2

试试这个

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

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