html - 如何在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当然你需要把里面图片的宽和高改成和frame的对 Angular 线一样。您可以为此使用 CSS 计算。

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;
}

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