CSS 在背景图像上添加阴影

在网页设计中，背景图像是经常使用的元素之一，为了让背景图像更加有立体感，我们可以在其上方添加阴影效果。本文将介绍如何使用 CSS 在背景图像上添加阴影。

使用 box-shadow 属性添加阴影

box-shadow 属性是 CSS 中添加阴影效果的一种方式，该属性需要指定阴影的偏移量、模糊半径、阴影颜色和阴影扩展半径等参数。我们可以在 containing element 上添加背景图像，并在其上方添加阴影效果。下面是一个示例代码：

.containing-element {
  background-image: url('image.jpg');
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

以上代码将给 containing element 添加一个背景图像，并在其上方添加一个 10 像素宽的黑色半透明阴影效果。

使用 ::before 伪元素添加阴影

除了使用 box-shadow 属性在 containing element 上添加阴影，我们也可以使用 ::before 伪元素在 containing element 内部添加阴影。可以使用 background-image 属性为 ::before 伪元素添加背景图像，并使用 box-shadow 属性添加阴影效果。

下面是一个示例代码：

.containing-element {
  position: relative;
}

.containing-element::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('image.jpg');
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

以上代码将为 containing element 添加一个 ::before 伪元素，并在其上方添加一个 10 像素宽的黑色半透明阴影效果。

总结

以上是两种在背景图像上添加阴影效果的方法。使用这些方法，您可以为网页设计带来更立体、更生动的效果。

Markdown 代码片段：

## 使用 box-shadow 属性添加阴影
```css
.containing-element {
  background-image: url('image.jpg');
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.containing-element {
  position: relative;
}

.containing-element::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('image.jpg');
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}