css - CSS 中的 Data-URI SVG 背景在 Firefox 中不起作用

Question

好的，这就是我正在尝试做的事情。我的 css 文件中有这段代码

.form_row .textfield:hover, .textfield_m:hover
{
    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMCI+DQogIDxkZWZzPg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibXlMaW5lYXJHcmFkaWVudDEiDQogICAgICAgICAgICAgICAgICAgIHgxPSIwJSIgeTE9IjAlIg0KICAgICAgICAgICAgICAgICAgICB4Mj0iMCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIG9mZnNldD0iMCUiICAgc3RvcC1jb2xvcj0iI2ZlZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMmY1ZjciIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogIDwvZGVmcz4NCg0KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIg0KICAgICBmaWxsPSJ1cmwoI215TGluZWFyR3JhZGllbnQxKSIgLz4NCjwvc3ZnPg==);
    background-repeat:repeat;
    background-color:White ;
    background-clip: border-box; -moz-background-clip: border; -webkit-background-clip: border-box;
    background-origin: border-box; -moz-background-origin: border; -webkit-background-origin: border-box;
    -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; -khtml-background-size: 100% 100%; background-size: 100% 100%;
    animation: pulse .75s ease-in-out 0s infinite alternate;
    -moz-animation:pulse .75s ease-in-out 0s infinite alternate; /*Firefox*/
    -webkit-animation:pulse .75s ease-in-out 0s infinite alternate; /*Safari and Chrome*/
    -o-animation:pulse .75s ease-in-out 0s infinite alternate; /*Safari and Chrome*/
}

它在文本输入中。
在每个浏览器中它似乎都工作正常，但它在 Firefox 5 中失败了。我得到的只是黑暗。
你可以看看我在这里看到的http://www.skylabsonline.com/holy/
请注意，在所有其他主要浏览器中它显示正常，但在 firefox 5 中它完全失败。
有任何想法吗？

另外，这里是上面Base64的SVG代码，我用这个网站来转换它http://webcodertools.com/imagetobase64converter , 但 base64 始终是 base64。

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
  <defs>
    <linearGradient id="myLinearGradient1"
                    x1="0%" y1="0%"
                    x2="0%" y2="100%"
                    gradientUnits="userSpaceOnUse">
      <stop offset="0%"   stop-color="#feffff" stop-opacity="1"/>
      <stop offset="100%" stop-color="#d2ebf9" stop-opacity="1"/>
    </linearGradient>
  </defs>

  <rect x="0" y="0" width="1" height="1"
     fill="url(#myLinearGradient1)" />
</svg>

Answer 1

Firefox 有一个错误，已在 FF6 中修复。 A hash(#) in the Data URI source会破坏形象。

内容中的#需要转义为%23。

引用资料

• Firefox 6 Release Notes: Updating Add-Ons - URL handling

• data URIs: No support for query strings, etc.