html - 使用 css 更改背景图像的不透明度

Question

我想用 css 改变页眉的背景图像不透明度。你能帮帮我吗？

.intro {
  display: table;
  width: 100%;
  height: auto;
  padding: 100px 0;
  text-align: center;
  color: #fff;
  background: url(http://lorempixel.com/1910/500/nature/) no-repeat bottom center scroll;
  background-color: #000;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

<header class="intro">
  ...
</header>

Answer 1

另一种方法是将此背景图像文件转换为 .PNG 格式，并使用照片编辑程序将原始图像的不透明度设置为 0.2，但如果您坚持使用 CSS，则可以使用以下方法:

由于 CSS 不直接支持背景图像不透明度，您可以尝试使用伪类在标题上覆盖另一个伪类并在其上设置不透明度。与此类似的内容应该有所帮助:

<header class="intro">
...
</header>

.intro {
    position: relative;
    background: #5C97FF;
    overflow: hidden;
}
/* You could use :after - it doesn't really matter */
.intro:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.6;
    background-image: url('../img/bg.jpg');
    background-repeat: no-repeat;
    background-position: 50% 0;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}