我想用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和不透明度.
