
解决 css mask 属性未请求图片的问题
在使用 css mask 属性时,指定了图片地址,但网络面板显示未请求获取该图片,这可能是由于浏览器兼容性问题造成的。
问题
如下代码所示:
立即学习“前端免费学习笔记(深入)”;
[data-icon="cloud"] {
--icon-cloud: url("https://api.iconify.design/mdi:apple-icloud.svg") center /
contain no-repeat;
mask: var(--icon-cloud);
inline-size: 1rem;
block-size: 1rem;
}
button {
appearance: none;
border: 0;
padding-inline: 1.5ch;
padding-block: 1ch;
display: inline-flex;
}使用该代码时,网络面板中并未显示对 "https://api.iconify.design/mdi:apple-icloud.svg" 的请求。
解决方案
此问题可能是由于浏览器版本较低造成的。更新到最新版本的 firefox 即可解决该问题。










