如何使CSS中的身体背景图像透明? [英] How to make body background image transparent in css?

查看:113
本文介绍了如何使CSS中的身体背景图像透明?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

据我所知,没有css属性可以使背景图像变得透明,
我一次又一次地尝试,但距离解决方案还差得远,
这是我的方法:

As per my knowledge there is no css property to make background image transparent, I'm trying again and again but still I'm far from solution, Here is my approach:

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

我在寻找其他问题,但发现了类似问题,但问题仍然存在。 / p>

I looked for other so questions and found something like, but problem remains.

推荐答案

也许这可以为您提供帮助。
必须将背景放在正文中:: after

Maybe this is can help you. You must put your background to body::after

<!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>

这篇关于如何使CSS中的身体背景图像透明?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆