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

我想用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>

解决方法

您可以在Photoshop或GIMP等程序中更改不透明度.

或者你可以用css中的不透明度来做到这一点.但是你可能不希望这样,因为你的.intro中会有一些内容,然后它也会受到影响.

所以我建议遵循解决方案

.intro {
    position: relative;
    z-index: 0;
    display: table;
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    color: black;
    background-color: transparent;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}


.intro:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url('http://www.planwallpaper.com/static/images/canberra_hero_image.jpg'); 
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}

https://jsfiddle.net/q63nf0La/

基本上你添加：在作为背景图像的元素之后,你将它定位为绝对(你的.intro将需要位置：相对;)然后你设置z-index和不透明度.

原文地址：https://www.jb51.cc/html/223977.html