具有不透明度的背景图像

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 应该是这样的：

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

具有不透明度的背景图像

Background image with opacity

css

background-image

opacity

选项 1

选项2（你所想我所想）