CSS渐变不适用于iOS

我已经创build了一个使用CSS生成器的渐变背景 。 这适用于所有主stream浏览器和Android。 然而在iOS我得到这个 。

我需要添加到这个渐变，以使其在iOS上工作？

编辑：因为这个问题没有得到足够的重视，我想问一个不同的问题：什么时候我需要为css标签创buildsafari / ios的线性渐变，当在这种情况下，-webkit-linear – 渐变不工作？ 有没有其他的CSS梯度标签，专门为safari？

这是我的背景的代码：

.gradient { /* Legacy browsers */ background: #FF7701 url("gradient-bg.png") repeat-x top; -o-background-size: 100% 100%; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; /* Internet Explorer */ *background: #FF7701; background: #FF7701\0/; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient-bg.png", sizingMethod="scale"); } @media all and (min-width: 0px) { .gradient { /* Opera */ background: #FF7701 url("gradient-bg.svg"); /* Recent browsers */ background-image: -webkit-gradient( linear, left top, left bottom, from(#FFAD26), to(#FF7701), color-stop(0.5, #FEA026), color-stop(0.5, #FFFFFF), color-stop(0.5, #FFFFFF), color-stop(0.5, #FFFFFF), color-stop(0.5, #FF8B00) ); background-image: -webkit-linear-gradient( top, #FFAD26, #FEA026 50%, #FFFFFF 50%, #FFFFFF 50%, #FFFFFF 50%, #FF8B00 50%, #FF7701 ); background-image: -moz-linear-gradient( top, #FFAD26, #FEA026 50%, #FFFFFF 50%, #FFFFFF 50%, #FFFFFF 50%, #FF8B00 50%, #FF7701 ); background-image: -o-linear-gradient( top, #FFAD26, #FEA026 50%, #FFFFFF 50%, #FFFFFF 50%, #FFFFFF 50%, #FF8B00 50%, #FF7701 ); background-image: linear-gradient( top, #FFAD26, #FEA026 50%, #FFFFFF 50%, #FFFFFF 50%, #FFFFFF 50%, #FF8B00 50%, #FF7701 ); } } 

Answer 1

在iOS中给这个检查，但它应该工作：

 background: #ffad26; /* Old browsers */ background: -moz-linear-gradient(top, #ffad26 0%, #fea026 50%, #ff8b00 51%, #ff7701 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffad26), color-stop(50%,#fea026), color-stop(51%,#ff8b00), color-stop(100%,#ff7701)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffad26', endColorstr='#ff7701',GradientType=0 ); /* IE6-9 */ 

我也build议寻找像SASS这样的预处理器，它会为你生成很多这些东西。

替代scheme1

作为替代scheme，您可以尝试使用embedded的方块阴影。 这不是确切的，它有它的局限性，但它只是一个选项:)

 background-color:#FF8B00; -webkit-box-shadow: inset 0px 100px 0px 0px rgba(255, 255, 255, 0.5); box-shadow: inset 0px 100px 0px 0px rgba(255, 255, 255, 0.5); 

替代2

如果您知道高度，请使用上方的阴影框或使用背景图像。 这样你就可以得到跨浏览器的支持，而不会像上面那样有一百个前缀为CSS的属性:)

Answer 2

至less在移动Safari中，你不能使用关键字transparent ，你必须改用rgba(255,255,255,0) 。 certificate： https ： //developer.apple.com/library/safari/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Gradients/Gradient.html

search透明，你甚至可以在他们的官方文档中看到，他们使用rgba作为透明颜色。

Answer 3

在这里工作DEMO http://jsfiddle.net/yeyene/akRHX/

和它的iPhone截图…

添加你的CSS类到元素。

HTML

 <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <div class="ui-grid-a"> <div class="ui-block-a"><div class="ui-bar gradient" style="height:200px">Block A</div></div> <div class="ui-block-b"><div class="ui-bar gradient" style="height:200px">Block B</div> </div> </div><!-- /grid-a --> </div><!-- /content --> </div><!-- /page --> 

CSS

 .gradient { /* Legacy browsers */ background: #FF7701 url("gradient-bg.png") repeat-x top; -o-background-size: 100% 100%; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; /* Internet Explorer */ *background: #FF7701; background: #FF7701\0/; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient-bg.png", sizingMethod="scale"); } @media all and (min-width: 0px) { .gradient { /* Opera */ background: #FF7701 url("gradient-bg.svg"); /* Recent browsers */ background-image: -webkit-gradient( linear, left top, left bottom, from(#FFAD26), to(#FF7701), color-stop(0.5, #FEA026), color-stop(0.5, #FFFFFF), color-stop(0.5, #FFFFFF), color-stop(0.5, #FFFFFF), color-stop(0.5, #FF8B00) ); background-image: -webkit-linear-gradient( top, #FFAD26, #FEA026 50%, #FFFFFF 50%, #FFFFFF 50%, #FFFFFF 50%, #FF8B00 50%, #FF7701 ); background-image: -moz-linear-gradient( top, #FFAD26, #FEA026 50%, #FFFFFF 50%, #FFFFFF 50%, #FFFFFF 50%, #FF8B00 50%, #FF7701 ); background-image: -o-linear-gradient( top, #FFAD26, #FEA026 50%, #FFFFFF 50%, #FFFFFF 50%, #FFFFFF 50%, #FF8B00 50%, #FF7701 ); background-image: linear-gradient( top, #FFAD26, #FEA026 50%, #FFFFFF 50%, #FFFFFF 50%, #FFFFFF 50%, #FF8B00 50%, #FF7701 ); } }