好的,所以这就是我想要做的.我在我的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>
解决方法
Firefox有一个在FF6中修复的错误.
A hash(#) in the Data URI source将破坏图像.
内容中的#需要以#转义.
参考
> Firefox 6 Release Notes: Updating Add-Ons – URL handling
> data URIs: No support for query strings,etc.
