渐变在 Safari 中不起作用 [英] Gradient not working in Safari

问题描述

由于某种原因，我的渐变在 Safari 中不起作用.它适用于所有其他浏览器，包括 IE，但不适用于 safari.有大佬知道解决办法吗?

My gradient isn't working in Safari for some reason. It works on all the other browsers including IE but not safari. Does anyone know the solution to this?

谢谢

#menuwrapper {
width: 100%;
height: 50px;
margin: 0;
clear: both;
background: #2c3a54; 
background: -moz-linear-gradient(left,  #1f2b42 2%, #2a3c5d 29%, #2a3c5d 70%, #1f2b42 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, right top, color-stop(2%,#1f2b42), color-stop(29%,#2a3c5d), color-stop(70%,#2a3c5d), color-stop(100%,#1f2b42)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(left,  #1f2b42 2%,#2a3c5d 29%,#2a3c5d 70%,#1f2b42 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(left,  #1f2b42 2%,#2a3c5d 29%,#2a3c5d 70%,#1f2b42 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(left,  #1f2b42 2%,#2a3c5d 29%,#2a3c5d 70%,#1f2b42 100%); /* IE10+ */

background: linear-gradient(to right,  #1f2b42 2%,#2a3c5d 29%,#2a3c5d 70%,#1f2b42 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f2b42', endColorstr='#2a3c5d',GradientType=1 ); /* IE6-8 */
}

推荐答案

这在 Safari 中有效，

This works in Safari,

#gradient_background {
     background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e4e4e4));
     background: -moz-linear-gradient(top, #ffffff, #038ec8);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#e4e4e4);
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#e4e4e4)";
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #f7f7f7), color-stop(50%, #f7f7f7), color-stop(100%, #e4e4e4));
     background-image: -webkit-linear-gradient(top, #ffffff 0%, #f7f7f7 50%, #f7f7f7 50%, #e4e4e4 100%);
     background-image: -moz-linear-gradient(top, #ffffff 0%, #f7f7f7 50%, #f7f7f7 50%, #e4e4e4 100%);
     background-image: -ms-linear-gradient(top, #ffffff 0%, #f7f7f7 50%, #f7f7f7 50%, #e4e4e4 100%);
     background-image: -o-linear-gradient(top, #ffffff 0%, #f7f7f7 50%, #f7f7f7 50%, #e4e4e4 100%);
     background-image: linear-gradient(top, #ffffff 0%, #f7f7f7 50%, #f7f7f7 50%, #e4e4e4 100%); 
}

这篇关于渐变在 Safari 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！