Question

我一直试图在全屏大小的背景图像前面显示导航栏，我想调整它的不透明度。我可以正确显示导航栏和图像，直到我修改图像的不透明度。当我这样做时，背景图像不会显示为完整大小。图像仅在导航栏启动时显示

html {
    background-image:url(../img/sea.jpg);
    background-size: 100%;
    opacity: 0.5;
}
.navigation {
        background-color: grey;
        list-style: none;
        padding-left: 0;
        position: fixed;
        text-align: center;
        top:300px;
        width: 100%;

}

.navigation li{
    display: inline-block;
    height:20px;
    width:110px;
}

.navigation a{
    text-decoration: none;
}

Answer 1

不透明度适用于您的整个元素，而不仅仅是您的背景。所以通过做

html {
    background-image:url(../img/sea.jpg);
    background-size: 100%;
    opacity: 0.5;
}

您告诉整个文档（html）的不透明度为50％。

因此，如果您尝试使用不透明度为50％的背景两个选项：

选项1

您的背景是固定的，并且始终只有50％不透明度：我建议将图像本身修改为50％不透明度图像（通过任何图像编辑器）并将其另存为png保持不透明度。但是，只有在匹配2个条件时，这才是好的：

您的背景不透明度永远不会改变
您的图片相当小（例如，png明显大于jpg，因此如果您希望页面加载可以合理，请使用repeatable image保持较小例如）。

选项2（我想你想要的）

您的背景不透明度因任何原因需要更改，或者在png中过大，您希望将其保留为jpg或您的格式：添加div包含html { min-height: 100%; /* or whatever your desired height is */ height: 100%; /* or whatever your desired height is */ min-width: 100%; /* or whatever your desired width is */ width: 100%; /* or whatever your desired width is */ } #background { background-image:url(../img/sea.jpg); background-size: 100%; opacity: 0.5; position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 0; /* To make sur it's below the rest */ }你的背景，只有你的背景，并改变它的不透明度，如下所示。

 <html>
   <div id="background"></div>
   ... All your other html goes here ...
 </html>

你的HTML应该是这样的：

{{1}}

背景图像与不透明度

1 个答案:

选项1

选项2（我想你想要的）