Dữ liệu-URI Nền SVG trong CSS không hoạt động trong Firefox

Question

Ok, vậy đây là những gì tôi đang cố gắng làm. Tôi có mã này trong tệp css của tôi

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

Đó là đầu vào văn bản.
Trong mọi trình duyệt, nó có vẻ hoạt động tốt, nhưng Firefox 5 không thành công. Tất cả những gì tôi nhận được là màu đen.
Bạn có thể có một cái nhìn vào những gì tôi nhìn thấy ở đây http://www.skylabsonline.com/holy/
Chú ý rằng trong tất cả các trình duyệt lớn khác nó sẽ hiển thị tốt, nhưng trong firefox 5 nó hoàn toàn thất bại.
Bất kỳ ý tưởng nào?

CŨNG, đây là mã SVG cho Base64 trên, và tôi đã sử dụng trang web này để chuyển đổi nó http://webcodertools.com/imagetobase64converter, nhưng base64 luôn là 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 đã có một lỗi đã được cố định trong FF6. A hash(#) in the Data URI source sẽ phá vỡ hình ảnh.

A # trong nội dung cần phải được thoát là %23.

Tài liệu tham khảo

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

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

Answer 2

tôi chỉ kết thúc phải quăng gradient trong tay sử dụng CSS sử dụng một cái gì đó giống như moz-gradient tuyến tính()