具有不透明度的背景图像
Posted
技术标签:
【中文标题】具有不透明度的背景图像【英文标题】：Background image with opacity 【发布时间】：2015-05-15 09:23:20 【问题描述】：我一直在尝试在全屏大小的背景图像前显示一个导航栏，我想调整它的不透明度。在我修改图像的不透明度之前，我能够正确显示导航栏和图像。当我这样做时，背景图像不会显示为全尺寸。图像仅在导航栏启动之前显示
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 元素上设置opacity:0.5; 可能不是一个好主意。通常将 opacity 设置为 1 以外的任何值以更改任何具有某些内容的元素的背景不透明度并不是一个好主意。
首先让整个页面的主背景图片不透明的目的是什么？除非您还为 html 元素设置了背景颜色（我在您的示例中没有看到任何内容）——您究竟希望通过该不透明度看到“透光”什么？我想您最好的选择是将该背景图像设为已包含 Alpha 透明度的 PNG，或者使用跨越整个视口的另一个元素，位于实际页面内容的后面，并赋予该背景图像和不透明度。
【参考方案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>
【讨论】：
我建议z-index:-1，但我很迷信。在任何情况下：请记住，如果您不注意，使用opacity 和z-index 可能会导致unexpected results。以上是关于具有不透明度的背景图像的主要内容，如果未能解决你的问题，请参考以下文章
在图像上具有不透明度的 jQuery 动画以相同的动画时间以不同的速度显示它们
Java Graphics2D - 绘制具有渐变不透明度的图像