如何在CSS中添加两个背景图像

Question

我希望帮助将两个图像添加到另一个图像上，并将两个图像放在中心

<div class="im1"> </div>
.im1{
    position: relative; top: 0; left: 0;
    background-image:url("../images/img-shadow.png"),url("../images/img-1.png");
    background-size:contain;
    height:358px;
        background-repeat: no-repeat,no-repeat;
}

背景图片带有阴影 我想要它

Answer 1

这实际上只能通过CSS来解决。

我在这里创建了一个示例，用于生成图像的旋转边框。

现在你可以在里面插入任何图片：）

p.s当然你需要改变里面图像的宽度和高度，使其与框架对角线相同。你可以使用CSS计算。

＆＃13;

＆＃13;

body {
  background-color: #F3F5F6;
  }

.shadow:before,
.shadow:after {
  content: "";
  position: absolute;
  z-index: -1;
  height: 10%;
  max-width: 90%;
  width: 90%;
}

.shadow:before {
  -webkit-transform: rotate(86deg);
  left: -72px;
  right: auto;
  top: 118px;
  box-shadow: 0 15px 5px rgba(0, 0, 0, 0.2);
}

.shadow:after {
  -webkit-transform: rotate(84deg);
  left: auto;
  right: -92px;
  bottom: 75px;
  box-shadow: 0 -15px 5px rgba(0, 0, 0, 0.2);
}

.rotate {
  -webkit-transform: rotate(45deg);
}

.box {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 100px;
  left: 100px;
}

.pic-wrapper {
  width: 100%;
  height: 100%;
  border: 10px solid #fff;
  overflow: hidden;
}

.pic {
  background-image: url('http://modernschoolec.com/wp-content/uploads/2015/04/11-980x408.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /* (side)(sqrt(2)) */
  width: 282px;
  height: 282px;
  -webkit-transform: rotate(-45deg);
  position: relative;
  top: -40px;
  left: -40px;
}

＆＃13;

<div class="box shadow rotate">
  <div class="pic-wrapper">
    <div class="pic"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以为阴影图像指定z-index为100，并为学校图像指定z-index为101，或将其中一个设为position relative，将其中一个设为position absolute ，但您需要媒体查询才能使其响应。

Answer 3

.im1{
    background-image:url("../images/img-1.png"),url("../images/img-shadow.png");
    height:358px;
        background-repeat: no-repeat,no-repeat;
   background-position: center , center;
}