Question

我在jQuery中制作了颜色选择器，我想在颜色选择器按钮上设置图像。

code: 

< body>
<input type="color" class="back-color-change"/>
</body>
<script>
$(".back-color-change").on("change",function(){
var colorpick=($(".back-color-change").val());
$(".body").css("background-color",colorpick);
 });
</script>

i want this type instead of this image

Answer 1

您必须为input-element指定不透明度为零，并使用包含图像的元素作为Background-Image将其包围。请参阅代码段中的示例：

＆＃13;

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<style>
.colorpicker-img {
background-image: url('http://i.stack.imgur.com/1Vohn.png');
width: 6em;
height:4em;
}
.colorpicker-img input[type="color"] {
opacity:0;
width: 6em;
height:4em;
}
</style>

<body>
<div class="colorpicker-img">
    <input type="color" class="back-color-change" />
</div>
</body>

<script>
    $(".back-color-change").on("change", function () {
        var colorpick = this.value;
        $("body").css("background-color", colorpick);
    });
</script>

＆＃13;

Answer 2

您可以使用label作为颜色选择器。隐藏颜色选择器并使用label for，如下所示。

＆＃13;

$(".back-color-change").on("change", function () {
    var colorpick = this.value;
    $("body").css("background-color", colorpick);
});

＆＃13;

#color {
    display: none;
}
#color + label {
    background-image: url('http://www.html5canvastutorials.com/demos/assets/color-picker.png');
    background-size: cover;
    display: block;
    height: 25px;
    width: 75px
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<input type="color" class="back-color-change" id="color" />
<label for="color"></label>

＆＃13;

如何在jquery中设置colorchooser上的图像

2 个答案: