css背景上有层遮罩

CSS背景上有层遮罩是一种常见的网页设计技巧，用于突出或增强某个区域的效果。这种技巧通过给背景添加一个遮罩层来实现。下面我们来看看具体的实现方式。 首先，我们需要在CSS中定义背景图像和遮罩层。背景图像通常使用background-image属性定义，而遮罩层则可以使用伪元素::before或::after来创建。遮罩层通常使用半透明的颜色来实现，以便让背景图像透过来。 代码如下：

p {
  background-image: url('bg-image.jpg');
  position: relative;
  z-index: 1;
}
p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
  opacity: 0.5;
}
 

在上面的代码中，我们对p标签添加了一个背景图像，并使用position属性和z-index属性将其放置在其它内容之上。接着，我们使用伪元素::before来创建遮罩层，并使用position属性将其定位到p标签的最上面。我们还给遮罩层定义了宽度和高度，以确保其覆盖整个p标签。最后，我们使用background-color属性给遮罩层添加了半透明的颜色，并使用opacity属性设置了遮罩层的透明度。 通过上述代码，我们可以很轻松地为网页添加一种优美的效果，将重点内容突出显示。如果您对CSS技巧感兴趣，不妨多多尝试，开拓您的CSS技能。