为什么 CSS mask 属性未请求指定图片？

从现在开始，努力学习吧！本文《为什么 CSS mask 属性未请求指定图片？》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

解决 css mask 属性未请求图片的问题

在使用 css mask 属性时，指定了图片地址，但网络面板显示未请求获取该图片，这可能是由于浏览器兼容性问题造成的。

问题

如下代码所示：

<button>
  icon <span data-icon="cloud"></span>
</button>

[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 即可解决该问题。

终于介绍完啦！小伙伴们，这篇关于《为什么 CSS mask 属性未请求指定图片？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！