CSS渐变在iOS上不起作用
Posted
技术标签:
【中文标题】CSS渐变在iOS上不起作用【英文标题】：CSS gradient not working on iOS 【发布时间】：2013-05-29 14:29:00 【问题描述】：我使用 CSS 生成器创建了一个 gradient background。这在所有主要浏览器和 android 上都能完美运行。但是在 ios 中我得到this。
我需要在这个渐变中添加什么才能使其在 iOS 上运行？
编辑：因为这个问题没有引起足够的重视，所以我想问一个不同的问题：我需要什么 css 标签才能为 safari/ios 创建线性渐变，当，在这种情况下，-webkit-linear-gradient 不起作用？是否还有其他 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
);
【问题讨论】：
【参考方案1】：至少在移动版 Safari 中，不能使用关键字 transparent，而必须使用 rgba(255, 255, 255, 0)。
这里有描述：https://developer.apple.com/library/safari/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Gradients/Gradient.html
如你所见，即使在苹果自己的官方文档中，也使用rgba(255, 255, 255, 0)而不是transparent。
【讨论】：
谢谢，这解决了我一直遇到的问题之一 这有效（至少在 iOS 8 上）并且是迄今为止最简单的解决方案。 谢谢。这对我有用，从透明褪色到纯色然后又变回来：linear-gradient(to right,rgba(255, 249, 240, 0), rgba(255, 249, 240, 1), rgba(255, 249, 240, 0))。现在在所有设备上看起来都很棒！
这对我也有帮助，谢谢！只有渐变在 iOS 上与 transparent 关键字有问题，还是其他属性也需要 rgba？
OP 没有使用transparent...我错过了什么吗？【参考方案2】：
请在 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 */
我还建议研究像 SASS 这样的预处理器，它会为你生成很多这样的东西。
备选方案 1
作为替代方案，您可以尝试使用嵌入框阴影。这并不准确，它有其局限性，但它只是一种选择:)
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 属性：)
【讨论】：
嗯，我自己没有 ipad，所以一个朋友正在为我测试 ipad mini 和 ipad 3。在 mini 上它可以工作，但在 ipad 3 上不行......我现在已经应用了你的代码，你能帮我测试一下它是否适合你吗？检查：rickgommers.nl/geoffrey 见我上面的回复。它也无法正常工作。我想用赏金奖励你，但因此我们必须先解决这个问题:) @Forza 尝试在元素上指定高度。例如，尝试 height:100%。如果这不起作用，我不确定除了我上面写的内容之外还有纯 CSS 的解决方案。如果这不起作用，我会使用图像并使用 background-repeat 平铺它：repeat-y; 那张图片很好用，哈哈。废话 CSS 在每个浏览器中的工作方式都不同......好旧的图像修复了它 :) Thx Rob！ @Forza 将此归咎于 CSS 是不公平的。每个浏览器都规定了它将支持多少 CSS 以及有多好。我相信你不会因为你曾经在 IE 上遇到的麻烦而责怪 W3C。【参考方案3】：工作演示在这里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
);
【讨论】：
【参考方案4】：对我来说，以下工作有效，这在桌面浏览器、android 和 ios 中对我有效：-
display: list-item;
background-image: linear-gradient(45deg, #2b4bff, #1b681f);
background-clip: text;
color: rgba(255, 255, 255, 0);
-
我正在使用 display:flex，但它不起作用，我不得不更改
列出项目。
我使用“透明”的颜色，现在我正在使用
rgba(255, 255, 255, 0)
一些有用的注释： 属性 background-clip: text;仅当直接应用于您要设置样式的元素时，才能在 Safari 中使用。您不能将其应用于父元素并同时为所有子元素设置样式。 （这在 Chrome 和 Firefox 中有效） enter link description here
【讨论】：
以上是关于CSS渐变在iOS上不起作用的主要内容，如果未能解决你的问题，请参考以下文章
CSS :hover 在 iOS Safari 和 Chrome 上不起作用
为啥 tailwind css 在 iPhone ios 设备上不起作用？