Le dégradé CSS ne fonctionne pas sur iOS
J'ai créé un fond dégradé à l'aide d'un générateur de CSS. Cela fonctionne parfaitement dans tous les principaux navigateurs et sur Android. Toutefois, dans iOS-je obtenir cette.
De quoi ai-je besoin d'ajouter à ce gradient afin de le faire fonctionner sur iOS?
Edit: Parce que cette question n'est pas de gagner assez d'attention, j'aimerais poser une autre question: de Quoi ai-je besoin pour css balise pour créer un dégradé linéaire pour safari/ios, lorsque, comme dans ce cas -, - webkit-linear-gradient n'est pas de travail? Existe-il d'autres css gradient de balises, en particulier pour safari?
Voici le code de mon arrière-plan:
.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.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
);
}
}
/;
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
);
}
}
source d'informationauteur Forza
Vous devez vous connecter pour publier un commentaire.
Ne donner à ce vérifiez dans iOS, mais ça devrait marcher:
Je recommande aussi à la recherche dans un pré-processeur comme SASS qui va générer beaucoup de ces choses pour vous.
Alternative 1
Comme alternative, vous pouvez essayer d'utiliser un encart zone d'ombre. Il n'est pas exact, et il a ses limites, mais c'est juste une option 🙂
La variante 2
Si vous connaissez la hauteur, soit utiliser la zone d'ombre au-dessus ou juste utiliser une image d'arrière-plan. De cette façon, vous aurez en charge des navigateurs sans le gâchis d'une centaine de préfixé propriétés CSS comme ci-dessus 🙂
Mobile safari au moins, vous ne pouvez pas utiliser le mot-clé
transparent
vous devez utiliserrgba(255,255,255,0)
à la place. La preuve: https://developer.apple.com/library/safari/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Gradients/Gradient.htmlDe recherche, de façon transparente, vous verrez même dans leur document officiel, ils utilisent
rgba
pour la couleur de transparence.De travail DÉMO ici http://jsfiddle.net/yeyene/akRHX/
Et son iPhone capture d'écran...
ajouter votre classe css de l'élément.
HTML
CSS