背景图像叠加 - CSS

在网页设计中，往往需要在背景上叠加一张图像以达到更好的视觉效果。本文将介绍如何使用CSS在背景图像上叠加一张图像。

1. 使用background-image

CSS中提供了background-image属性，可以用来设置元素的背景图像。比如，下面的例子用两张背景图像叠加：

.example {
  background-image: url(bg.jpg), url(fg.png);
  background-position: center, center;
  background-repeat: no-repeat;
}

上述代码将先显示bg.jpg作为背景，再显示fg.png。background-position设置图像的位置，background-repeat设置图像是否重复。

2. 使用伪元素

除了使用background-image属性外，还可以使用伪元素:before或:after来叠加一张图像。

.example:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(bg.jpg);
  opacity: 0.5;
}

.example {
  position: relative;
}

上述代码中，我们为.example元素新建了一个:before伪元素，并设置了position为absolute，使其与.example元素重叠。然后，为:before设置了背景图像bg.jpg并设置了透明度为0.5，使其叠加在.example元素的背景之上。为了让:before伪元素显示在.example元素之上，我们将.example元素的position属性设置为relative。

结语

使用上述方法可以在背景上叠加一张图像，使页面更具美感和视觉吸引力。在实际应用时，可以根据需要进行适当调整。