html - 输入范围滑块,用图像替换拇指不起作用
问题描述
我正在尝试使用 css 创建一个自定义范围滑块。
<style>
.slide-container {
width: 300px;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 5px;
border-radius: 5px;
background: #FFFFFF;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 23px;
height: 24px;
border: 0;
border-radius: 50%;
background: #DAA521;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 23px;
height: 24px;
border: 0;
border-radius: 50%;
background: #DAA521;
cursor: pointer;
}
</style>
和html:
<div class="slide-container">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
我想替换background: #DAA521;
为,background: url('{% static 'images/coffee.png' %}');
这样拇指就变成了一张图片,而不仅仅是一个彩色圆圈。但是在实践中,这似乎不起作用。有什么想法吗?
解决方案
用背景图像替换背景:#DAA521:url(“图像文件的路径”);
推荐阅读
- python - Pandas 在不同的数据框中使用相同的单元格值应用折扣
- batch-file - 如何批量打开带有空格的目的地
- html - HTML5 音频播放器有 206 但不播放
- python - 如何判断 Python Turtle 是否在正方形中
- azure - 将 JSON 数据行转入列
- lambda - Lambda 表达式缩减示例
- godot - 我如何在godot中制作一个api
- javascript - Babel 6 Typescript 预设
- events - Caliburn.Micro / IHandle / EventAggregator 中的属性未更新
- css - 如何在同一个内联中将两个按钮一个向左移动,另一个向右移动?