透明图像看彩色背景

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

这是一个使用遮罩的想法，我将考虑从字体真棒图标https://fontawesome.com/icons/heart?style=regular

中获取的SVG。

res <- transform(df1, C=df2$C[match(apply(df1[-1], 1, max), df2$A)])
res
#         date A B   C
# 1 2020-09-01 0 1 1.0
# 2 2020-09-02 0 0 0.5
# 3 2020-09-03 1 2 1.5
# 4 2020-09-04 5 3 3.0
# 5 2020-09-05 0 0 0.5

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