在CSS数据URI SVG的背景在Firefox中不工作 [英] Data-URI SVG background in CSS not working in Firefox

问题描述

好了，这里就是我想要做的。我有这个code在我的CSS文件

  .form_row .textfield：悬停，.textfield_m：悬停
{
    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMCI+DQogIDxkZWZzPg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibXlMaW5lYXJHcmFkaWVudDEiDQogICAgICAgICAgICAgICAgICAgIHgxPSIwJSIgeTE9IjAlIg0KICAgICAgICAgICAgICAgICAgICB4Mj0iMCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIG9mZnNldD0iMCUiICAgc3RvcC1jb2xvcj0iI2ZlZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMmY1ZjciIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogIDwvZGVmcz4NCg0KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIg0KICAgICBmaWxsPSJ1cmwoI215TGluZWFyR3JhZGllbnQxKSIgLz4NCjwvc3ZnPg==);
    背景重复：重复;
    背景颜色：白色;
    背景夹：边界箱; -moz-背景剪辑：边界; -webkit-背景夹：边界箱;
    背景由来：边界箱; -moz-背景由来：边界; -webkit-背景由来：边界箱;
    -o-背景尺寸：100％100％; -webkit背景尺寸：100％100％; -khtml背景尺寸：100％100％;背景尺寸：100％100％;
    动画：脉冲.75s缓解-IN-OUT 0无限备用;
    -moz-动画：脉冲.75s缓解-IN-OUT 0无限备用; /*火狐*/
    -webkit-动画：脉冲.75s缓解-IN-OUT 0无限备用; / * Safari和Chrome * /
    -o-动画：脉冲.75s缓解-IN-OUT 0无限备用; / * Safari和Chrome * /
}
 

这是在一个文本输入。
结果
在每一个浏览器似乎做工精细，但它的Firefox 5失败。我得到的是黑暗。
结果
你可以看看我所看到的在这里 http://www.skylabsonline.com/holy/
结果
请注意，在所有其他主流浏览器会显示正常，但在Firefox 5中彻底失败。
结果
有任何想法吗？
结果搜索结果

此外，这里是SVG code以上的Base64的，我用这个网站把它转换的 HTTP：//web$c$crtools.com/imagetobase64converter ，但Base64是永远的base64

。

 ＆LT; SVG的xmlns =htt​​p://www.w3.org/2000/svgWIDTH =100％HEIGHT =100％视框=0 0 1 1preserveAspectRatio =无＆GT;
  ＆LT;＆DEFS GT;
    ＆所述;的LinearGradient ID =myLinearGradient1
                    X1 =0％Y1 =0％
                    ×2 =0％Y2 =100％
                    gradientUnits =userSpaceOnUse＆GT;
      ＆LT;停止偏移=0％停止色=＃feffff停不透明度=1/＆GT;
      ＆LT;停止偏移=100％停止色=＃d2ebf9停不透明度=1/＆GT;
    ＆LT; /＆的LinearGradient GT;
  ＆LT; / DEFS＆GT;  ＆所述;矩形X =0Y =0的宽度=1高度=1
     填写=URL（＃myLinearGradient1）/＆GT;
＆LT; / SVG＆GT;
 

解决方案

我只是最后不得不折腾梯度使用CSS使用像-moz-梯度线性手动（）

Ok, so here's what I'm trying to do. I have this code in my css file

.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*/
}

It's in a text input.
In every browser it seems to work fine, but it Firefox 5 it fails. All I get is blackness.
You can take a look at what I'm seeing here http://www.skylabsonline.com/holy/
Notice that in all the other major browsers it displays fine, but in firefox 5 it completely fails.
Any ideas?

ALSO, here is the SVG code for the Base64 above, and I used this site to convert it http://webcodertools.com/imagetobase64converter , but base64 is always 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>

解决方案

I just ended up having to toss the gradient in manually using CSS using something like -moz-gradient-linear()

这篇关于在CSS数据URI SVG的背景在Firefox中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！