html - 透明图像以查看彩色背景

Question

我需要重新创建这个：

渐变背景必须通过图像的形状才能看到。但我不知道具体怎么做。

我现在得到的：

<div style="background-color: #fff; padding: 15px; border-radius: 10px; margin-bottom: 5px;">
    <div style="background: transparent url('image') 0% 0% no-repeat padding-box;">
    </div>
</div>

但这只是完全隐藏了图像。

Answer 1

这是一个使用掩码的想法，我将考虑取自字体真棒图标的 SVG：https ://fontawesome.com/icons/heart?style=regular

.box {
  -webkit-mask:
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" ><path d="M458.4 64.3C400.6 15.7 311.3 23 256 79.3 200.7 23 111.4 15.6 53.6 64.3-21.6 127.6-10.6 230.8 43 285.5l175.4 178.7c10 10.2 23.4 15.9 37.6 15.9 14.3 0 27.6-5.6 37.6-15.8L469 285.6c53.5-54.7 64.7-157.9-10.6-221.3zm-23.6 187.5L259.4 430.5c-2.4 2.4-4.4 2.4-6.8 0L77.2 251.8c-36.5-37.2-43.9-107.6 7.3-150.7 38.9-32.7 98.9-27.8 136.5 10.5l35 35.7 35-35.7c37.8-38.5 97.8-43.2 136.5-10.6 51.1 43.1 43.5 113.9 7.3 150.8z" ></path></svg>') 
    center /  /* position of the heart */
    60% 60%   /* size of the heart */
    no-repeat,
    linear-gradient(#fff,#fff);
  -webkit-mask-composite:destination-out;
  mask-composite:exclude;
  width:200px;
  height:200px;
  background:#fff;
  border-radius:10px;
}

body {
  background:linear-gradient(to right,red,blue);
}

<div class="box">
</div>