所以基本上，我正在粘贴我的 jsfiddle，以便您更容易弄清楚到底发生了什么。https://jsfiddle.net/h608n5yj/2/<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head><style> .avatar-small { width: 75px; height: 75px; padding: 4px; } img { width: 100%; height: 100%; object-fit: cover; clip-path: url('#avatar-mask'); -webkit-clip-path: url('#avatar-mask') } .avatar { background-image: linear-gradient(to right, #9f7d5a, #d4b380 17%, #eecf97 41%, #b89a6a 62%, #dabd85 83%, #d4b380 100%); clip-path: url('#avatar-mask'); -webkit-clip-path: url('#avatar-mask'); }</style><body> <svg> <defs> <clipPath id="avatar-mask" clipPathUnits="objectBoundingBox"> <path d="M .5 0 C .1 0 0 .1 0 .5 0 .9 .1 1 .5 1 .9 1 1 .9 1 .5 1 .1 .9 0 .5 0 Z" /> </clipPath> </defs> </svg> <div class="avatar avatar-small"> <img src="https://i.ibb.co/gycB3mQ/avatar.png"> </div></body></html>只需先在 chrome 上打开此链接，然后再在 Safari 上打开。您会意识到存在差异（查看图像的背景）。这让我相信clip-path即使使用webkit前缀也不能在 safari 上工作。怎么了？有任何想法吗？我对此不太满意SVG，所以我可能会理解这一点，所以如果你能给我修复这个问题的代码，我将不胜感激。
1 回答
三国纷争
TA贡献1804条经验 获得超7个赞
我会在掩码内使用 SVG
.avatar-small {
width: 75px;
height: 75px;
padding: 4px;
}
.avatar-big {
width: 175px;
height: 175px;
padding: 10px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.avatar {
background-image: linear-gradient(to right, #9f7d5a, #d4b380 17%, #eecf97 41%, #b89a6a 62%, #dabd85 83%, #d4b380 100%);
}
.mask,
.mask > *{
-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1 1"> <path d="M .5 0 C .1 0 0 .1 0 .5 0 .9 .1 1 .5 1 .9 1 1 .9 1 .5 1 .1 .9 0 .5 0 Z" /></svg>');
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1 1"> <path d="M .5 0 C .1 0 0 .1 0 .5 0 .9 .1 1 .5 1 .9 1 1 .9 1 .5 1 .1 .9 0 .5 0 Z" /></svg>');
}
<div class="avatar avatar-small mask">
<img src="https://i.ibb.co/gycB3mQ/avatar.png">
</div>
<div class="avatar avatar-big mask">
<img src="https://i.ibb.co/gycB3mQ/avatar.png">
</div>
添加回答
举报
0/150
提交
取消