Css 解决IE和一些Chrome浏览器中HTML5颜色输入问题_Css_Html

Css 解决IE和一些Chrome浏览器中HTML5颜色输入问题

css html

Css 解决IE和一些Chrome浏览器中HTML5颜色输入问题,css,html,Css,Html,请问，谁能帮我解决这个页面的问题。它应该是一个颜色选择器，但在某些浏览器中不会加载背景图像。似乎它与输入颜色类型方法有关。我该如何在IE Edge等游戏中绕过它 <!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <bo

请问，谁能帮我解决这个页面的问题。它应该是一个颜色选择器，但在某些浏览器中不会加载背景图像。似乎它与输入颜色类型方法有关。我该如何在IE Edge等游戏中绕过它

<!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>

尝试：

背景图像：而不仅仅是背景

谢谢，改为背景图片。没有改变IE的边缘行为。显示初始颜色的编号，不调用调色板选择器。

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;
}