本文将介绍如何使用CSS伪元素 `:before` 实现背景图片不透明度的单独控制，避免直接设置 body 元素的背景图片导致整体透明度变化。通过将背景图片应用于 `:before` 伪元素，并调整其 `opacity` 属性，可以实现背景图片的透明度调整，而不影响 body 元素中的其他内容。
当需要调整网页背景图片的不透明度，但又不希望影响整个 body 元素及其内部内容时，一个常用的技巧是利用 CSS 伪元素 :before。 直接在 body 元素上设置背景图片并调整 opacity 属性会导致所有子元素也继承该透明度，这往往不是我们想要的结果。 使用 :before 伪元素可以将背景图片作为一个独立的图层放置在 body 元素之后，从而实现单独控制背景图片透明度的效果。
实现步骤：
移除 body 元素的背景图片： 首先，移除原来直接设置在 body 元素上的 background-image 属性。
使用 :before 伪元素： 为 body 元素添加 :before 伪元素，并设置其 content 属性为空字符串（content: '';）。这是使用伪元素的必要步骤。
设置 :before 元素的样式： 为 :before 元素设置以下样式：
调整 body 元素的定位： 如果 :before 元素使用了 position: absolute; 定位
，确保 body 元素或其父元素具有 position: relative; 定位，以便 :before 元素能够相对于 body 元素进行定位。
示例代码：
body {
width: 100vw; /* 视口宽度 */
min-height: 100vh; /* 视口高度 */
margin: 0; /* 移除默认 margin */
position: relative; /* 确保 :before 元素相对于 body 定位 */
}
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://picsum.photos/id/1015/300/300); /* 替换为你的图片 URL */
background-size: cover;
opacity: 0.4;
z-index: -1; /* 确保背景在内容之下 */
}
/* 其他 body 元素的样式 */注意事项：
总结：
使用 CSS 伪元素 :before 可以有效地控制背景图片的不透明度，而不会影响 body 元素中的其他内容。 这种方法在需要创建具有透明背景的网页时非常有用。 通过调整 :before 元素的样式，可以实现各种各样的背景效果。 记得根据实际需求调整代码中的图片 URL、尺寸调整方式和不透明度值。