更改 HTML 中背景图像的不透明度答案

【问题标题】：Change opacity of background image in HTML更改 HTML 中背景图像的不透明度
【发布时间】：2015-01-09 22:09:49
【问题描述】：

我创建了一个 HTML 页面。我的页面中有一张背景图片。我想改变背景的不透明度即背景中使用的图像的不透明度。我正在使用此代码向我的页面添加背景图片：

<!DOCTYPE html>
<html>
<head>
    <style>
    body{background-image: url('IMG_18072014_115640.png')}
    </style>
</head>

    <h1>Hello world!</h1>
    <body>The background image will be shown behind this text.</body>

</html>

如何更改此代码以更改此背景图像的不透明度。

【问题讨论】：

CSS: set background image with opacity?的可能重复
我会保持诚实，我已经删除了我的答案，因为你的问题绝对是重复的......
@MatíasFidemraizer 绝对。公主，你还用谷歌搜索吗？
@ThePragmatick 有时人们称之为懒惰 :D

标签： css html image background

【解决方案1】：

将background-image应用到body的:after:伪元素并更改其opacity，使body的内容不受影响。

body, html {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
}
body:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(http://www.lorempixel.com/600/400);
  opacity: 0.3;
  z-index: -1;
}

<h1>Hello world!</h1>
<body>The background image will be shown behind this text.</body>

【讨论】：

【解决方案2】：

我认为你误解了 html 中的一些内容，

但一种简单的解决方案是制作透明背景图片...（PNG24 透明度）

【讨论】：

【解决方案3】：

试试这个方法来改变psudo element的不透明度：DEMO

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(http://s.hswstatic.com/gif/evil-robots-3b.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

【讨论】：