线性背景图像不工作正确的探险之旅

问题描述：

body{ 
    background:red; 
} 

div{ 
    width:100%; 
    height:100%; 
     background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); 
    background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); 
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0))); 
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); 
    background-image: -o-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); 
    background-image: linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); 
    background-repeat: repeat-x; 
}

和HTML：

<div> 
    test 
</div>

正如你可以在这里看到，它会显示不同的Chrome和Safari之间：

http://codepen.io/anon/pen/apwoGj

为什么会这样呢？

https://css-tricks.com/thing-know-gradients-transparent-black/ –

答

正如其他人所说的在PC上的Safari浏览器已经死了，不应该使用，因为除了它是一个非常古老和死亡的浏览器，并会支持小css3的事实，它也将是一个安全问题，因为它不被维护。用户应该将其从系统中移除，因为这些日子没有可行的用途。

尽管上述代码存在问题，但PC上的safari 5.1并不理解新的线性渐变语法（因为它不在那里），您需要使用前缀版本。

background-image：-webkit-linear-gradient（bottom，#FFFFFF 0％，#DDDDDD 100％）; 以上是经过测试，并在safari PC上工作（我安装了一个旧机器，我不再使用）。

这就是从网络男人只是复制过去的东西.. – uksz

答

检查了这一点，从白色变为白色，零透明。似乎在铬和safari上的工作对我来说是一样的。

div{ 
    width:100%; 
    height:100%; 
    background: #fff; 
    background: -webkit-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0)); 
    background: -o-linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0)); 
    background: -moz-linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0)); 
    background: linear-gradient(to right, rgba(255,255,255,1) , rgba(255,255,255,0)); 
}

另外，还要在顶部有一个纯色背景只是柜面一个浏览器不支持渐变将恢复到纯色。

如果你有一个坚实的背景，将不需要透明度，使用纯色。

background: -webkit-linear-gradient(left, #fff, red); 
background: -o-linear-gradient(right, #fff, red); 
background: -moz-linear-gradient(right, #fff, red); 
background: linear-gradient(to right, #fff, red);

这会是一个渐变从白色到红色作为背景为红色（红色无论你的背景颜色变化）

工程太棒了！谢谢！ – uksz

顺便说一句，这在移动设备（iOS）上不起作用。 – uksz

如果您使用的是坚实的背景，您不需要使用透明度，请检查更新的答案 –

答

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */ 
background: #1e5799; /* Old browsers */ 
background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */ 
background: -webkit-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */ 
background: linear-gradient(to right, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1); /* IE6-9 */

也许用这个命令并解释从Colorzilla gradient generator.尝试这样的原因你可能有某种我们看不到的类型，或者你的订单不是最好的。

线性背景图像不工作正确的探险之旅

相关推荐