線性背景圖像不工作正確的探險之旅

我有以下代碼：線性背景圖像不工作正確的探險之旅

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

爲什麼會這樣呢？

來源

2017-01-23 uksz

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上工作（我安裝了一箇舊機器，我不再使用）。

來源

2017-01-23 11:29:13

這就是從網絡男人只是複製過去的東西.. – 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);

這會是一個漸變從白色到紅色作爲背景爲紅色（紅色無論你的背景顏色變化）

來源

2017-01-23 11:36:25

工程太棒了！謝謝！ – 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.嘗試這樣的原因你可能有某種我們看不到的類型，或者你的訂單不是最好的。

來源

2017-01-23 11:38:33

線性背景圖像不工作正確的探險之旅

回答

相關問題