css - 如何解决CSS mask属性不请求图片的问题?

Question

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;      }

codesandbox

Answer 1

CSS 变量定义，url() 只能定义这么多

--icon-cloud: url("https://api.iconify.design/mdi:apple-icloud.svg");

后面再多出来的 center / contain no-repeat，会导致 CSS变量定义出错

Answer 2

应该是浏览器的问题，换了最新版的firefox就可以了。

Answer 3

CSS mask 属性用于创建一些复杂的视觉效果，例如遮罩。mask 属性可以接受一个或多个图像，这些图像用作遮罩层。然而，这些遮罩图像并不会被浏览器渲染，而是被用作遮罩层，覆盖在元素上。

在你的代码中，mask: var(--icon-cloud); 这行代码将 --icon-cloud 这个变量作为遮罩图像。然而，你在样式表中并没有定义 --icon-cloud 这个变量。因此，尽管你在 mask 属性中引用了这个变量，但是并没有定义它的值，所以浏览器不知道应该使用哪个图像作为遮罩。

为了解决这个问题，你需要确保 --icon-cloud 这个变量已经被定义并且有了一个有效的 URL。你可以在 CSS 样式表中添加一个定义这个变量的规则，如下所示：

:root {  --icon-cloud: url("https://api.iconify.design/mdi:apple-icloud.svg") center /    contain no-repeat;}

这段代码将在 :root 选择器上定义 --icon-cloud 这个变量，并将其值设置为一个有效的 SVG 图像的 URL。这样，当你使用 mask: var(--icon-cloud); 时，浏览器就能够找到并使用正确的遮罩图像了。