CSS Mask在Firefox上不起作用

Nafiul伊斯兰教|

我正在尝试使用遮罩显示SVG图像,但是在Firefox中却没有出现。我的CSS类如下:

.myClass {
    -webkit-mask: url('../img/arrow-down.svg') no-repeat 100% 100%;
    mask: url('../img/arrow-down.svg') no-repeat 100% 100%;
    background: rgba(67, 67, 67, 0.8);
    width: 1.15em;
    height: 1em;
}

而html代码只是一个简单的例子:

<div class="myClass"></div>

在chrome中,我蒙版的arrow-down.svg显示得很好,但是在Firefox中,出现了具有指定背景的div。关于如何解决我的问题有什么想法吗?

罗伯特·朗森
mask: url('../img/arrow-down.svg') no-repeat 100% 100%;

是无效的。您不能拥有一个整个SVG文件的遮罩,它必须具有指向mask元素的片段标识符。

最重要的是,Firefox当前不支持URL之外的任何其他参数,因此no-repeat 100% 100%会导致失败。

对于Firefox,您需要的是这样的东西:

mask: url('../img/arrow-down.svg#maskelement') 

其中maskelement是<mask>arrow-down.svg文件中元素的ID

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

此动画(css3)在Firefox上不起作用

来自分类Dev

CSS动画在Firefox和IE上不起作用

来自分类Dev

此动画(css3)在Firefox上不起作用

来自分类Dev

CSS:页面分为3列,在Firefox上不起作用

来自分类Dev

我的表单上的CSS样式在Firefox上不起作用

来自分类Dev

Google字体在CSS上不起作用

来自分类Dev

CSS“悬停”在滑块上不起作用

来自分类Dev

CSS Calc在Safari上不起作用

来自分类Dev

css 文件在 wahmpserver 上不起作用?

来自分类Dev

CSS3过滤器在Opera,Internet Explorer,Mozilla Firefox上不起作用

来自分类Dev

CSS跨浏览器过滤器模糊在Firefox上不起作用

来自分类Dev

CSS过滤器invert()在Mozilla FireFox上不起作用?

来自分类Dev

自定义CSS3复选框在Firefox或IE上不起作用

来自分类Dev

透视图属性(css3)在Mozilla Firefox浏览器上不起作用

来自分类Dev

CSS3转换在Firefox上不起作用,为什么?

来自分类Dev

<table>中的Flex CSS属性在IE和Firefox上不起作用

来自分类Dev

CSS过滤器invert()在Mozilla FireFox上不起作用?

来自分类Dev

CSS3过滤器在Opera,Internet Explorer,Mozilla Firefox上不起作用

来自分类Dev

5秒后隐藏元素只有CSS在Firefox上不起作用

来自分类Dev

CSS3中的翻转和旋转功能在Firefox上不起作用

来自分类Dev

firefox css 选项样式不起作用

来自分类Dev

CSS中的Segoe UI Semilight在Chrome上不起作用

来自分类Dev

CSS动画“从侧面滑入”在Chrome上不起作用

来自分类Dev

CSS转换:翻译在iPad上不起作用

来自分类Dev

CSS:在悬停显示块上不起作用

来自分类Dev

CSS在wicked_pdf上不起作用

来自分类Dev

CSS“ width:auto”在<div>上不起作用

来自分类Dev

CSS在jsp上的id上不起作用

来自分类Dev

Tailwind CSS边框颜色在网页上不起作用

Related 相关文章

  1. 1

    此动画(css3)在Firefox上不起作用

  2. 2

    CSS动画在Firefox和IE上不起作用

  3. 3

    此动画(css3)在Firefox上不起作用

  4. 4

    CSS:页面分为3列,在Firefox上不起作用

  5. 5

    我的表单上的CSS样式在Firefox上不起作用

  6. 6

    Google字体在CSS上不起作用

  7. 7

    CSS“悬停”在滑块上不起作用

  8. 8

    CSS Calc在Safari上不起作用

  9. 9

    css 文件在 wahmpserver 上不起作用?

  10. 10

    CSS3过滤器在Opera,Internet Explorer,Mozilla Firefox上不起作用

  11. 11

    CSS跨浏览器过滤器模糊在Firefox上不起作用

  12. 12

    CSS过滤器invert()在Mozilla FireFox上不起作用?

  13. 13

    自定义CSS3复选框在Firefox或IE上不起作用

  14. 14

    透视图属性(css3)在Mozilla Firefox浏览器上不起作用

  15. 15

    CSS3转换在Firefox上不起作用,为什么?

  16. 16

    <table>中的Flex CSS属性在IE和Firefox上不起作用

  17. 17

    CSS过滤器invert()在Mozilla FireFox上不起作用?

  18. 18

    CSS3过滤器在Opera,Internet Explorer,Mozilla Firefox上不起作用

  19. 19

    5秒后隐藏元素只有CSS在Firefox上不起作用

  20. 20

    CSS3中的翻转和旋转功能在Firefox上不起作用

  21. 21

    firefox css 选项样式不起作用

  22. 22

    CSS中的Segoe UI Semilight在Chrome上不起作用

  23. 23

    CSS动画“从侧面滑入”在Chrome上不起作用

  24. 24

    CSS转换:翻译在iPad上不起作用

  25. 25

    CSS:在悬停显示块上不起作用

  26. 26

    CSS在wicked_pdf上不起作用

  27. 27

    CSS“ width:auto”在<div>上不起作用

  28. 28

    CSS在jsp上的id上不起作用

  29. 29

    Tailwind CSS边框颜色在网页上不起作用

热门标签

归档