📌  相关文章
📜  背景图像上的 CSS 图层 - CSS (1)

📅  最后修改于: 2023-12-03 15:41:22.957000             🧑  作者: Mango

背景图像上的 CSS 图层 - CSS

CSS 背景图像为网页添加了更多元素，以及更具创意的设计可能性。但是有时，我们可能需要在背景图像顶部添加其他元素，比如文字或让某个链接在图像上浮现。目前，CSS 提供了一个简单的解决方案，也就是背景图像上的 CSS 图层。

什么是背景图像上的 CSS 图层

背景图像上的 CSS 图层使得您可以在页面的背景图像上面放置更多的内容，而不会破坏背景本身。如下图所示，您可以看到在背景图像上方，有一个半透明的白色层，上面写着标题 "Hello World"。

背景图像上的 CSS 图层

这个层是如何做到的呢？它实际上是一个绝对定位的 div 元素，它的位置和尺寸与包含它的背景图像相对应。因为它是绝对定位的，所以它不会影响其余的文档流。

CSS 代码如下所示：

body {
  background-image: url("path/to/background-image.jpg");
  background-size: cover;
  position: relative;
}
.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1em;
  background-color: rgba(255, 255, 255, 0.5);
}

注意到覆盖层 .overlay 元素有一个 position: absolute; CSS 属性。这意味着它的位置不会受到其余文档流的影响。 它会被定位到其父元素 .body 相对于的位置 (这里我们把 .body 设为 position: relative;)。当我们设置 top 和 left 为 50% 时，它将被居中对齐。 transform: translate(-50%, -50%); 将其向左和向上移动到其自身的一半大小。

如何在背景图片上使用

背景图片上的 CSS 图层的实现非常容易。您可以使用绝对定位元素，将它放在背景图像上，再使用 z-index CSS 属性来控制在页面上的位置。

下面是一个实例，展示了如何在背景图像上放置链接:

<body>
  <div class="background">
    <div class="overlay">
      <h1>Hello World!</h1>
      <a href="#">Read More</a> 
    </div>
  </div>
</body>

.background {
  background-image: url("path/to/background-image.jpg");
  background-size: cover;
  height: 100vh;
  position: relative;
}
.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  padding: 1em;
  background-color: rgba(255, 255, 255, 0.5);
}
.overlay a {
  color: #fff;
  text-decoration: none;
}

这个示例中，.background 元素设置了背景图像。 .overlay 元素是一个绝对定位的 div 元素，它的位置和尺寸与包含它的背景图像相对应。 .overlay 上设置了一个 z-index 属性，来控制页面上元素的顺序。更具体地说，一个元素的 z-index 值越高，它就越可能出现在页面的顶部。

总结

背景图像上的 CSS 图层使得您可以在页面的背景图像上方放置更多的内容，而不会影响背景本身。只要给它们添加绝对位置，设置好大小以及z-index就可以了。 这为设计师们提供了更多的灵活性和创造性。