html - CSS 切割图像与其他图像

Question

我有这个 div。

.a {
  background-image: url(url_image);
  height: 400px;
  background-position: bottom;
  background-attachment: scroll
}

<div class="a">
  <div class="b">
    <div class="content1">
    </div>
    <div class="content2">
    </div>
    <div class="content3">
    </div>
  </div>

.a 图像有不规则边框:

我需要将背景图像放入 div .b 并获得如下内容:

这可能吗？

Answer 1

您需要翻转两个图像。背景图片需要放在.a中，不规则边框图片需要放在.b中。把这想象成画一幅画，你从背景开始，然后添加前景。前景图像需要具有透明背景，以便您可以看到背景图像。 (这就是上面不规则背景图片的蓝色部分)

.a {
  background-image: url(myImage);
  background-size: 100% 100%;
  height: 400px;
  background-position: bottom;
  background-attachment: scroll
}
.b{
    background-image: url(irregularBorder);
    background-size: 100% 100%;
    height: 400px;
    background-position: bottom;
    background-attachment: scroll;
}