爲了解決IE瀏覽器和一些Chrome瀏覽器中的HTML5顏色輸入問題

請問有沒有人能幫我解決這個頁面http://gecko.sashaz.com/index.html的問題。它應該是一個顏色選擇器，但背景圖像不會在某些瀏覽器中加載。似乎它與輸入顏色類型方法有關。我如何在IE Edge中解決它？爲了解決IE瀏覽器和一些Chrome瀏覽器中的HTML5顏色輸入問題

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 

<!-- CLICK TO CHANGE COLOR --> 
<input type="color" value="#e73d18"> 

<!-- Image Credit --> 


</body> 
</html>

的style.css：

body { 
    background-image: url(http://gecko.sashaz.com/green_Gecko.jpg)no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    margin: 0; 
} 

input { 
    /* removes default styling from input color element */ 

    padding: 0; 
    border: none; 
    /* makes input (color swatch) 100% size of container */ 

    position: absolute; 
    width: 100%; 
    height: 100%; 
    /* mix blend mode makes the color of the swatch alter the image behind it. */ 

    mix-blend-mode: hue; 
    cursor: pointer; 
} 
/* removes default styling from input color element */ 

::-webkit-color-swatch { 
    border: none; 
} 

::-webkit-color-swatch-wrapper { 
    padding: 0; 
} 

::-moz-color-swatch, 
::-moz-focus-inner { 
    border: none; 
} 

::-moz-focus-inner { 
    padding: 0; 
} 
/* Image Credit */ 

a { 
    position: absolute; 
    bottom: 10px; 
    right: 10px; 
    color: skyblue; 
    background: black; 
    display: block; 
    padding: 3px 8px; 
    font-size: 18px; 
    text-decoration: none; 
}

來源

2015-11-07 Alexandra Serebrennikova

嘗試：

的background-image：不是隻有背景。

來源

2015-11-07 11:05:18 Zorken17

謝謝，更改爲background-image。沒有改變IE Edge的行爲。顯示初始顏色的編號，不調用調色板選擇器。 –

爲了解決IE瀏覽器和一些Chrome瀏覽器中的HTML5顏色輸入問題

回答

相關問題