我一直在尝试在全屏大小的背景图像前显示一个导航栏，我想调整它的不透明度。在修改图像的不透明度之前，我能够正确显示导航栏和图像。当我这样做时，背景图像不会以全尺寸显示。图片只显示到导航栏开始
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;
}
最佳答案
不透明度适用于您的整个元素，而不仅仅是您的背景。所以通过做
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>
关于css - 具有不透明度的背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29023018/