时间戳

首页 > 解决方案 > 在 div 的背景中对齐 2 个图像

css - 在 div 的背景中对齐 2 个图像

问题描述

我想将 2 张图片作为背景图片放入 div 中。

这是我放的代码，但我只看到第二张图片。

#wrap-header {
  max-width: 100%;
  height: 400px;
  background-image: url("../assets/header_background.png"), url("../assets/circle_header_background.png");
  background-repeat: no-repeat;
  background-position: center bottom, center top;
}

<div id="wrap-header">

</div>

我想检索一个图像在另一个图像下的效果，或者一个图像作为第一层，第二个在底部。

我找不到办法。你能帮帮我吗？

标签： cssbackground-image

解决方案

您可以使用 CSS 选择器:after和:before执行此操作

首先，将以下内容添加到#wrap-header：

#wrap-header {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    height: 400px;
}

然后使用选择器：

#wrap-header:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    width: 100%;
    background-image: url('image1');
    background-repeat: no-repeat;
    background-position: center
}

#wrap-header:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50%;
    width: 100%;
    background-image: url('image2');
    background-repeat: no-repeat;
    background-position: center;
}

推荐阅读