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;
}

Answer 2

HTML代码

<header class="intro">
<img class="IntroImg" src="../img/bg.jpg">
</header>

CSS代码

.intro introIimg:hover {
opacity: 1.0;//Set your opacity
...

}

希望它会对你有所帮助。

Answer 3

没有CSS属性background-opacity，但你可以通过插入一个具有常规不透明度的伪元素来伪造它，后面是元素的确切大小。

.intro {
	position: relative;
	z-index: 0;
	display: table;
	width: 100%;
	height: auto;
	padding: 100px 0;
	text-align: center;
	color: #fff;
	background-color: #000;
}

.intro:after {
	content : "";
	width: 100%;
	height: 100%;
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	opacity : 0.2;
	z-index: -1;
	background: url(https://t1.ftcdn.net/jpg/00/81/10/58/240_F_81105881_pmBwtzXqFmtFx6rfhujAqTnhpWZf8fXn.jpg) no-repeat bottom center scroll;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
}

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

请参阅链接here

Answer 4

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

或者您可以在css中使用opacity执行此操作。但是你可能不想要，因为你的.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/

基本上，您添加了:after元素作为背景图片，您将其定位absolute（您的.intro需要position:relative;），然后设置{ {1}}和z-index。

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

4 个答案: