如何解决透明图像看彩色背景
我需要重新创建一个:
必须通过图像的形状看到渐变背景。但是我不知道怎么做。
我现在得到的是:
<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>
但这只会完全隐藏图像。
解决方法
这是一个使用遮罩的想法,我将考虑从字体真棒图标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);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。