如何使用 CSS 使背景更暗

在某些情况下，可能需要使背景更暗，这样文本和内容就会更加明显。使用 CSS，您可以通过以下方式达到此目的：

方法一：使用 rgba() 函数设置不透明度

rgba() 函数允许您设置一个颜色及其透明度。将这个颜色作为背景，而不是使用不透明度属性，将使得它更加灵活，可以同时改变颜色和透明度，比如使背景更暗。

语法：

background-color: rgba(red, green, blue, alpha);

• red, green, blue：颜色值，范围在 0 和 255 之间。
• alpha：透明度，取值范围在 0（完全透明）到 1（完全不透明）之间。

示例：

body {
  background-color: rgba(0, 0, 0, 0.5);
}

这将使整个页面的背景变暗。

方法二：使用 ::before 伪元素

::before 伪元素可以在元素内部生成一个虚拟的元素，可以在其中设置不同的样式。通过设置不透明度，您可以使用 ::before 元素并在元素之前覆盖一个半透明的背景。

语法：

.element::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(red, green, blue, alpha);
  z-index: -1;
  opacity: 0.5;
}

示例：

.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: -1;
  opacity: 0.5;
}

这将在 .container 元素前添加一个虚拟元素，并覆盖一个半透明的黑色背景。

方法三：使用 vw 和 vh 单位

vw 和 vh 是相对于 viewport 的宽度和高度的单位。可以在 background 属性中使用这些单位，以及透明度，来实现创建半透明背景的目的。

语法：

background: rgba(red, green, blue, alpha) url(image) no-repeat center center fixed / cover;

示例：

body {
  background: rgba(0, 0, 0, 0.5) url("image.jpg") no-repeat center center fixed / cover;
}

这将设置半透明的黑色背景，并将图像添加到页面的中央。图像将被缩放，以覆盖整个视口。

以上就是 CSS 中使背景更暗的几种方法。无论您的需求是什么，都可以使用其中一种方法来实现。