SOURCE

<div class="one">
  <img src="https://ranwawa-personal.oss-cn-beijing.aliyuncs.com/study/theatre-masks.svg"
  class="mask" />
  <div class="origin">
    <img src="https://ranwawa-personal.oss-cn-beijing.aliyuncs.com/study/mask.JPG"
    class="mask" />
    <div>
      这里只有两行文字,有padding
    </div>
    <div>
      这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding
    </div>
  </div>
  <div class="origin-mask">
    <img src="https://ranwawa-personal.oss-cn-beijing.aliyuncs.com/study/mask.JPG"
    class="mask" />
    <div>
      这里只有两行文字,有padding
    </div>
    <div>
      这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding
    </div>
  </div>
</div>
<div class="two">
  <img src="https://ranwawa-personal.oss-cn-beijing.aliyuncs.com/study/Compass_masked.png"
  class="mask" />
  <div class="origin">
    <img src="https://ranwawa-personal.oss-cn-beijing.aliyuncs.com/study/mask.JPG"
    class="mask" />
    <div>
      这里只有两行文字,有padding
    </div>
    <div>
      这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding
    </div>
  </div>
  <div class="origin-mask">
    <img src="https://ranwawa-personal.oss-cn-beijing.aliyuncs.com/study/Compass_masked.png"
    class="mask" />
    <div>
      这里只有两行文字,有padding
    </div>
    <div>
      这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding这里有很多行文字,无padding
    </div>
  </div>
</div>

.one,
.two {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.one > img,
.two > img {
  width: 100px;
  height: 100px;
}

.origin > div,
.origin-mask > div {
  display: inline-block;
  width: 100px;
  margin: 10px;
  overflow: hidden;
  vertical-align: top;
  font-size: 12px;
}

.origin > img:nth-child(1),
.origin-mask > img:nth-child(1) {
  width: 100px;
  height: 100px;
}

.origin > div:nth-child(2),
.origin-mask > div:nth-child(2) {
  height: 50px;
  padding: 10px;
  background-color: #ccc;
}

.origin > div:nth-child(3),
.origin-mask > div:nth-child(3) {
  height: 100px;
  background-color: #ccc;
}

.one > .origin-mask > img,
.one > .origin-mask > div {
  -webkit-mask-image: url("https://ranwawa-personal.oss-cn-beijing.aliyuncs.com/study/theatre-masks.svg");
}
.two > .origin-mask > img,
.two > .origin-mask > div {
  -webkit-mask-image: url(https://ranwawa-personal.oss-cn-beijing.aliyuncs.com/study/Compass_masked.svg);
}