具有不透明度的背景图像

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 个条件时才有用：

1. 您的背景不透明度永远不会改变
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 应该是这样的：

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