输入范围滑块,用图像替换拇指不起作用 [英] Input range slider, replace thumb with image not working
问题描述
我正在尝试使用 css 创建自定义范围滑块.
<style>.幻灯片容器{宽度:300px;}.滑块{-webkit 外观:无;宽度:100%;高度:5px;边框半径:5px;背景:#FFFFFF;大纲:无;不透明度:0.7;-webkit-transition:.2s;过渡:不透明度 .2s;}.滑块:悬停{不透明度:1;}.slider::-webkit-slider-thumb {-webkit 外观:无;外观:无;宽度:23px;高度:24px;边框:0;边界半径:50%;背景:#DAA521;光标:指针;}.slider::-moz-range-thumb {宽度:23px;高度:24px;边框:0;边界半径:50%;背景:#DAA521;光标:指针;}</风格>
还有html:
我想将 background: #DAA521;
替换为 background: url('{% static 'images/coffee.png' %}');
以便拇指变成了图片,而不仅仅是一个彩色圆圈.但是在实践中,这似乎不起作用.有什么想法吗?
解决方案 尝试使用详细的background-*
规则.
background-image: url('图片的url')
- 这是图片background-size: contains;
- 确保图像始终包含在按钮内background-position: center center;
- 图片总是在按钮的中心background-repeat: no-repeat;
- 图片不重复
只需使用静态图像的相对或绝对路径,然后删除 Django 模板代码.将 css 包含到模板中通常不是一个好习惯,直接使用浏览器加载它们.
.slide-container {宽度:300px;}.滑块{-webkit 外观:无;宽度:100%;高度:5px;边框半径:5px;背景:#FFFFFF;大纲:无;不透明度:0.7;-webkit-transition:.2s;过渡:不透明度 .2s;}.滑块:悬停{不透明度:1;}.slider::-webkit-slider-thumb {-webkit 外观:无;外观:无;宽度:23px;高度:24px;边框:0;边界半径:50%;背景图片: url('https://img.icons8.com/material-outlined/344/average-2.png');背景尺寸:包含;背景位置:中心中心;背景重复:不重复;光标:指针;}.slider::-moz-range-thumb {宽度:23px;高度:24px;边框:0;边界半径:50%;背景图片: url('https://img.icons8.com/material-outlined/344/average-2.png');背景尺寸:包含;背景位置:中心中心;背景重复:不重复;光标:指针;}
<div class="slide-container"><input type="range" min="1" max="100" value="50" class="slider" id="myRange"></div>
I am trying to create a custom range slider using 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>
And the html:
<div class="slide-container">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
I would like to replace background: #DAA521;
with background: url('{% static 'images/coffee.png' %}');
so that the thumb becomes a picture instead of just a coloured circle. However in practice, this doesn't seem to work. Any thoughts?
解决方案 Try to use the detailed background-*
rules.
background-image: url('the url to the image')
- this is the image
background-size: contain;
- makes sure the image is always contained inside the button
background-position: center center;
- image is always in the center of the button
background-repeat: no-repeat;
- image is not repeated
Just use relative or absolute path to your static image, and drop the Django template code. It's generally not a good practice to include css into your templates, load them directly with the browser.
.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-image: url('https://img.icons8.com/material-outlined/344/average-2.png');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 23px;
height: 24px;
border: 0;
border-radius: 50%;
background-image: url('https://img.icons8.com/material-outlined/344/average-2.png');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
}
<div class="slide-container">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
这篇关于输入范围滑块,用图像替换拇指不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
相关文章
- jQuery滑块范围在iPad上不起作用;
- Jquery 滑块范围在 iPad 上不起作用;
- 输入范围滑块的Javascript代码在Internet Explorer 11中不起作用;
- 滑块控件不起作用;
- 隐藏输入类型=“范围”在webkit中的滑块拇指;
- xargs:用管道替换命令$(...)不起作用;
- 用同步块替换volatile不起作用;
- JSX React HTML5 输入滑块不起作用;
- jQuery MenuCool滑块不起作用;
- jQuery Mobile滑块不起作用;
- 替换。()不起作用;
- 图像的滑块或旋转木马向后不起作用;
- 在拇指上方显示滑块范围值;
- 在拇指顶部显示滑块范围值;
- jQuery:用范围替换输入;
- JavaScript 替换不起作用;
- jquery替换不起作用;
- 替换方法不起作用;
- 用jquery.on()替换jquery.live()不起作用;
- 如何偏移范围滑块上的矩形拇指;
- 如何在“滑块"的拇指上显示“范围滑块"的值?;
- jQuery.val在范围输入上不起作用?;
- 输入范围在ie或edge中不起作用;
- 用两个拇指控制滑块;
- 使用IE时Jssor滑块不起作用;
前端开发最新文章
- 为什么Chrome(在Electron内部)突然重定向到chrome-error:// chromewebdata?;
- 错误102(net :: ERR_CONNECTION_REFUSED):服务器拒绝连接;
- 如何解决'重定向已被CORS策略阻止:没有'Access-Control-Allow-Origin'标题'?;
- 如何处理“Uncaught(in promise)DOMException:play()失败,因为用户没有首先与文档交互。”在桌面上使用Chrome 66?;
- 警告:添加非被动事件侦听器到滚动阻塞'touchstart'事件;
- 如何在浏览器中播放.TS文件(视频/ MP2T媒体类型)?;
- 此请求已被阻止;内容必须通过HTTPS提供;
- 资源解释为样式表,但转换为MIME类型text / html(似乎与web服务器无关);
- 通过HTTPS加载页面但请求不安全的XMLHttpRequest端点;
- 拒绝从执行脚本'*',因为它的MIME类型(“应用/ JSON')不是可执行文件,并严格MIME类型检查被启用。;