【问题标题】:Firefox: SVG background image with filter gets rasterized / blurryFirefox:带有过滤器的 SVG 背景图像被光栅化/模糊
【发布时间】:2014-07-13 15:22:02
【问题描述】:

我的网站由一个 div 组成,该 div 由背景大小为 100% 的背景图像组成。容器本身的宽度为 100%,底部填充为 10%。我不明白为什么我的 svg 被转换为非矢量图像。放大后看起来真的很可怕。我尝试使用非百分比值,但这也不起作用。 preserveAspectRatio 也无关紧要。

使用内联图像作为 img 效果很好,但我想为 svg sprite 背景位置设置动画。

我真的需要一些建议。有解决办法吗?

【问题讨论】:

  • 这可能会有所帮助:stackoverflow.com/questions/14171475/…
  • @Epistemex 我记得我看过那篇文章,但它对我不起作用。我没有父元素。我只使用具有我的背景图像的 1 个元素/div/类。我试图将其设置为固定大小。我注意到在 illustrator 中删除阴影可以解决这个问题。我不知道为什么。过滤器以某种方式引发了这个问题,但我当然想保留它。
  • 请做一个小提琴,让我们看看发生了什么。仅凭您的描述不足以诊断您的问题。
  • @BigBadaboom 这是我的错误报告bugzilla.mozilla.org/show_bug.cgi?id=1015575

标签: html image css svg


【解决方案1】:

进入 illustrator 并添加在 Photoshop 中制作的阴影。这样,除了阴影之外的所有东西都将是一个 svg,从而产生一个混合 svg 文件。完美运行; )

【讨论】:

    猜你喜欢
    • 2014-09-04
    • 2020-12-13
    • 1970-01-01
    • 1970-01-01
    • 2016-08-22
    • 2013-12-22
    • 2013-01-13
    • 1970-01-01
    • 2022-01-23
    相关资源
    最近更新 更多