为body设置opacity后背景不受影响的问题求解

嗨，新年快乐！😊 咱们来搞定这个问题~

你遇到的这个情况其实是浏览器渲染机制的一个小细节：当你给body设置背景样式时，浏览器会自动把这个背景“转移”到<html>元素上，而body本身的背景区域实际上是透明的。所以当你给body加opacity时，只有body包含的内容（比如段落、按钮这些子元素）会变透明，那个渐变背景因为已经属于<html>了，根本不受body的opacity影响。而<div>的背景是属于它自己的，所以设置div的opacity会同时影响背景和内容，这就是两者表现不同的原因。

既然必须用body来实现，这里有两个靠谱的解决方案：

方案一：用伪元素承载背景（推荐） #

把背景样式从body移到body::before伪元素上，这样背景就属于body的一部分了，之后控制body的opacity就能同时影响背景和内容，或者也可以单独控制背景的透明度。

修改后的CSS代码如下：

* { box-sizing: border-box; }
body { 
  font-family: 'Arial'; 
  margin: 0; 
  text-align: center; 
  position: relative; /* 让伪元素相对于body定位 */
  z-index: 1; /* 保证内容在背景上方 */
  opacity: 1;
}
/* 用伪元素创建背景层 */
body::before {
  content: '';
  position: fixed; /* 固定覆盖整个视口 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #1BBCB1, #37B9E9);
  z-index: -1; /* 把背景放在内容下方 */
  opacity: 1;
}
/* 切换opacity时，同时控制body内容和背景 */
body.opacity {
  opacity: .3;
}
body.opacity::before {
  opacity: .3;
}
button { 
  background-color: transparent; 
  border: 2px solid #000; 
  border-radius: 3px; 
  margin-top: 15px; 
  padding: 10px; 
  cursor: pointer; 
}

如果你的需求是只让背景变透明，内容保持不透明，那只需要修改伪元素的opacity即可，body的opacity保持1：

body.opacity::before {
  opacity: .3;
}
/* body的opacity不用改 */
body {
  opacity: 1;
}

方案二：直接给html元素设置opacity #

如果你的需求是让整个页面（包括所有内容和背景）都变透明，那可以直接给<html>元素加opacity，这样背景和body内容都会被影响：

html.opacity {
  opacity: .3;
}

对应的JS也要改成切换html的类：

$("button").click(function() { $("html").toggleClass("opacity"); });

不过这个方法会让整个页面都透明，适合需要全局透明的场景。

这样修改后，点击按钮就能看到body的背景和内容一起跟着透明度变化啦~

内容的提问来源于stack exchange，提问作者Red