gpt4 book ai didi

css - 如何在css中使 body 背景图像透明?

转载 作者:行者123 更新时间:2023-12-04 18:02:25 26 4
gpt4 key购买 nike

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

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

我寻找了其他问题并找到了类似的问题,但问题仍然存在。

最佳答案

把你的背景放到 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 - 如何在css中使 body 背景图像透明?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42312909/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com