CSS渐变在iOS上不工作 [英] CSS gradient not working on iOS
问题描述
我创建了渐变背景。这在所有主要的浏览器和Android上完美。但是在iOS中，我获得了这个。
我需要什么
编辑：因为这个问题没有得到足够的关注，我想， d喜欢问一个不同的问题：我需要什么css标签为safari / ios创建线性渐变，当，在这种情况下，-webkit-linear-gradient不工作？有没有其他css渐变标签，特别是safari？这里是我的背景代码：
.gradient {
/ *旧版浏览器* /
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 * /
*背景：＃FF7701;
background：＃FF7701\0 /;
filter：progid：DXImageTransform.Microsoft.AlphaImageLoader（src =gradient-bg.png，sizingMethod =scale）;
}
@media all和（min-width：0px）{
.gradient {
/ * Opera * /
background：＃FF7701 url bg.svg）;
/ *最近浏览器* /
background-image：-webkit-gradient（
linear，
左上角，左下角，
来自（＃FFAD26） b $ b到（＃FF7701），
颜色停止（0.5，＃FEA026），
颜色停止（0.5，#FFFFFF），
颜色停止（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
）;
}
}
在iOS中给这个检查，但它应该工作：
background：＃ffad26; / *旧浏览器* /
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），色停（100％，＃ff7701））; / * Chrome，Safari4 + * /
背景：-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 * /
我还建议查看像SASS这样的预处理器
$ b
一个替代，你可以尝试使用插入盒阴影。这不是精确的，它有它的局限性，但它只是一个选项：）
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属性：）
I have created a gradient background using a CSS generator. This works perfectly in all major browsers and on Android. However in iOS i get this.
What do I need to add to this gradient in order to make it working on iOS?
Edit: Because this question isn't gaining enough attention, I'd like to ask a different question: What do I need for css tag to create a linear gradient for safari/ios, when, as in this case, -webkit-linear-gradient is not working? Are there any other css gradient tags, specifically for safari?
Here's the code for my background:
.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
);
}
}
Do give this a check in iOS but it ought to work:
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 */
I'd also recommend looking into a pre-processor like SASS which will generate a lot of these things for you.
Alternative 1
As an alternative, you could try using an inset box shadow. It's not exact, and it has it's limitations but it's just an option :)
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);
Alternative 2
If you know the height, either use the box shadow above or just use a background image. That way you'll get cross-browser support without the mess that is a hundred prefixed CSS properties like above :)
这篇关于CSS渐变在iOS上不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![这个](\"http://piclair.com/data/trwm6.jpg\"){kind=link}
