gpt4 book ai didi

css - 解决 IE 和某些 Chrome 版本中的 HTML5 颜色输入问题

转载 作者:行者123 更新时间:2023-11-28 03:03:38 25 4
gpt4 key购买 nike

拜托,谁能帮我解决这个页面的问题http://gecko.sashaz.com/index.html .它应该是一个颜色选择器,但背景图像不会在某些浏览器中加载。似乎与输入颜色类型方法有关。我如何在 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>

样式.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;
}

最佳答案

尝试:

background-image: 而不仅仅是背景。

关于css - 解决 IE 和某些 Chrome 版本中的 HTML5 颜色输入问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33581806/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com