透明图像看彩色背景
计划B
我需要重新创建：
必须通过图像的形状看到渐变背景。但是我不知道怎么做。
我现在得到的是：
<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>
但这只是完全隐藏了图像。
陪同Afif
这是一个使用遮罩的想法，我将考虑从字体真棒图标中获取的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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
使用ImageMagick彩色的透明图像
- 2
Photoshop像透明图像上的背景
- 3
具有透明背景的透明图像的问题
- 4
读透明图像作为白色背景scikit图像蟒
- 5
单击单独的div后更改透明图像的背景颜色
- 6
删除 Xamarin Forms 中透明图像的背景？
- 7
Java SplashScreen透明图像
- 8
显示透明图像的形状
- 9
Javascript，显示透明图像。
- 10
Python 透明图像遮罩
- 11
如何在iOS SDK中将标签栏背景图像更改为透明图像
- 12
c#将半透明图像与新图像中的背景颜色合并
- 13
如何在HTML中将多个透明图像设置为背景？
- 14
如何使用PIL将透明图像的背景设置为白色？
- 15
彩色背景与png图像
- 16
在透明图像上单击div
- 17
在WPF或Silverlight中单击透明图像
- 18
JavaFX LineChart-保存透明图像
- 19
在Qt中更改透明图像的颜色
- 20
在轴上显示透明图像（MATLAB）
- 21
透明图像上的相交检测
- 22
VB.NET透明图像边框
- 23
Android在透明图像中填充颜色
- 24
用jQuery围绕透明图像发光
- 25
混合后仍需要透明图像
- 26
在 PHP 上合并透明图像
- 27
CSS 图像替换处理关闭图像和透明图像
- 28
给div悬停的彩色背景+给彩色背景不透明
- 29
如何在Java中使透明图像不透明？
我来说两句