Question

据我所知，没有css属性可以使背景图像透明，我一次又一次地尝试，但我仍然远离解决方案，这是我的方法：

body {
    background-image: url("PPI01.jpg");
    background-attachment: fixed;
    background-position: bottom;
    filter: opacity(opacity: 30%);
    z-index: -1;
    background-repeat: no-repeat;
}

我寻找其他问题并找到类似的东西，但问题仍然存在。

Answer 1

也许这可以帮到你。你必须把你的背景放在body :: after

之后

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
body {
  width: 1200px;
  height: 1200px;
  display: block;
  position: relative;
  margin: 0 auto;
  z-index: 0;
}

body::after {
  background: url(http://kingofwallpapers.com/background-image-laptop/background-image-laptop-018.jpg);
  content: "";
  opacity: 0.9;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;   
}

div {
  font-size: 36px;
  color: white;
}

	</style>
</head>
<body>
 <div>
   The text will not affected by the body
 </div>
</body>
</html>

＆＃13;

Answer 2

替代方法是使用绝对位置图像作为背景，并使用以下属性设置图像

img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

在样式表中使用图像源URL会使动态更改源变得困难。

通常情况下，背景图像是经过预处理的，在将其上传到静态服务器之前，您也可以先考虑将其作为透明的PNG文件，这样您就可以使用PS，Sketch等图像处理应用程序使图像透明。

Answer 3

我与您分享我的答案，因为我认为它比公认的解决方案好一点，主要是因为使用我的解决方案，您可以根据需要在 HTML 中设置图像 URL。您还可以轻松地为不同的不透明度级别创建不同的 CSS 类:)

CSS：

body.light-bg {
  background-position-x: 50% !important;
  background-position-y: 50% !important;
  background-size: cover !important;
}
body.light-bg::before {
  background: white;
  content: "";
  height: 100%;
  opacity: 0.35;
  position: absolute;
  width: 100%;
  z-index: -1;
}

HTML：

<body style="background: url(image.png)" class="light-bg"></body>

Answer 4

您可以使用白色和不透明度的rgba背景属性。

background; rgba(255, 255, 255, 0.3) url(IMAGE_PATH); /* Add other attributes as required */

Answer 5

您应该使用opacity属性来设置值。允许的值为0到1。

body {
    background-image: url("PPI01.jpg");
    background-attachment: fixed;
    background-position: bottom;
    opacity: 0.3;
    z-index: -1;
    background-repeat: no-repeat;
}

检查W3C上的完整documentation。

如何在css中使身体背景图像透明？

5 个答案: