你如何在其他图像的边界内填充图像？
阿雷格
大家好，我正在尝试在这样的 png 轮廓中填充图像
目前我有什么
<img _ngcontent-udx-c1="" alt="content-icon" src="https://i.stack.imgur.com/ob90p.png" ng-reflect-ng-style="[object Object]" style="background: url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/nature-quotes-1557340276.jpg");">其中 event-icon.png 是白色轮廓，背景是来自谷歌的一些随机图像。结果是
但我希望它确实填充在另一个图像的边界内，而不是仅仅通过整个标签将其推出。我怎样才能做到这一点？
陪伴阿菲
您需要创建另一个如下所示的图像并将其用作蒙版：
body {
background:lightblue;
}<img src="https://i.ibb.co/RyJRkpB/mask.png" />
<img src="https://i.stack.imgur.com/ob90p.png" />在上面我们有两个图像，蒙版和带有轮廓的图像，如果将它们组合起来，您将得到以下内容：
.box {
-webkit-mask:url(https://i.ibb.co/RyJRkpB/mask.png) center/contain no-repeat;
mask:url(https://i.ibb.co/RyJRkpB/mask.png) center/contain no-repeat;
background:url(https://picsum.photos/id/1014/800/800) center/cover;
}
body {
background:lightblue;
}<img src="https://i.stack.imgur.com/ob90p.png" class="box">结果并不完美，因为我不擅长图像编辑，但您可以轻松编辑蒙版图像以使其更好
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
IE 11中的FormData未定义
- 2
如何一次从多个文本框中获取值？
- 3
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 4
OpenCv：改变 putText() 的位置
- 5
Redux动作正常，但减速器无效
- 6
如何从JavaScript中的MP3文件读取元数据属性？
- 7
如何使用Redux-Toolkit重置Redux Store
- 8
将加号/减号添加到jQuery菜单
- 9
OpenGL纹理格式的颜色错误
- 10
获取并汇总所有关联的数据
- 11
超过时间限制错误C ++
- 12
ActiveModelSerializer仅显示关联的ID
- 13
在交互式Python Shell中获得最后结果
- 14
如何开始为Ubuntu开发
- 15
去噪自动编码器和常规自动编码器有什么区别？
- 16
Excel 2016图表将增长与4个参数进行比较
- 17
算术中的c ++常量类型转换
- 18
使用因子时如何在y轴上的ggplot中插入count或％
- 19
TreeMap中的自定义排序
- 20
如何在R中转置数据
- 21
在 React Native Expo 中使用 react-redux 更改另一个键的值
我来说两句