CSS中的数据URI SVG背景在Firefox中不起作用

前端之家收集整理的这篇文章主要介绍了CSS中的数据URI SVG背景在Firefox中不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
好的,所以这就是我想要做的.我在我的css文件中有这个代码 @H_404_2@.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.

@H_404_2@<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>

解决方法

原文链接:https://www.f2er.com/css/215194.html

猜你在找的CSS相关文章