css 图片 始终在最低层

使用 CSS 控制页面中图片的层级，可以让图片始终出现在最低层。这在一些设计上需要时非常有用。下面将介绍如何使用 CSS 控制图片的层级。 首先，我们通过 html 中的 img 标签在页面中插入一张图片，如下所示：

<img src="image.jpg"></img>

接下来，在 CSS 样式表中为 img 标签添加以下样式代码：

img {
   position: relative;
   z-index: -1;
}

上面的代码中，我们将 img 元素的 position 属性设置为 relative，以确保在 z-index 值被设置之后能够正常工作。接着，我们将 z-index 值设置为 -1，这样图片就会被放置在最低层。 如果需要将其他元素放置在图片上面，则需要给这些元素赋予比图片更高的 z-index 值。 此外，还有一种方法可以通过 CSS 在图片之下创建不透明的半透明背景，方法如下：

.image-container {
   position: relative;
}

.image-container::before {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0,0.5);
   z-index: -1;
}

上面的代码中，我们首先为包含图片元素的容器添加了 position: relative 样式。然后，我们使用 ::before 伪元素创建了一个半透明背景层，并将其定位在图片之下。 总之，通过使用 CSS 控制页面中图片的层级，可以实现多种设计需求。无论是将图片置于最底层还是在其下面创建半透明背景，都可轻松实现。