如何在完整CSS中的元素背景中重复圆圈？

Question

我想自定义这样的滑块:

所以我想知道是否有一种简单的CSS方法,它将适应父元素的宽度.或者如果我需要在我的html中添加圆圈并设置给定百分比的颜色.

这是我的两个问题,我不知道如何在完整的CSS中做:

• 让圆圈在背景中重复
• 颜色只使用某种覆盖div的圆圈 background: @color

有可能吗？

谢谢!

我不想用javascript来使用任何东西,我的网页很重,因为:p

Answer 1

您可以使用重复的径向渐变来创建这样的点:

1. 使用径向渐变创建单个圆:

   radial-gradient(ellipse at center, #ffbdd7 0%, #ffbdd7 30%, transparent 30%)
   

2. 将渐变放入background在x轴上重复的渐变中background-repeat: repeat-x

3. 水平居中背景 background-position

4. 使用控制圆的大小 background-size

例

body {
  margin: 0;
}
div {
  background: radial-gradient(ellipse at center, #ffbdd7 0%, #ffbdd7 30%, transparent 30%);
  background-size: 20px 20px;
  background-repeat: repeat-x;
  background-position: 5px center;
  width: 100vw;
  height: 50px;
}

<div></div>

创建自定义范围滑块输入

您可以使用<input type="range">和自定义它.跨浏览器工作有点麻烦.

例

body {
  margin: 0;
}
input[type=range] {
  -webkit-appearance: none;
  cursor: pointer;
  background: radial-gradient(ellipse at center, #ffbdd7 0%, #ffbdd7 30%, transparent 30%, transparent 100%) 5px center repeat-x;
  background-size: 20px 20px;
  width: 100vw;
  height: 50px;
  outline: 0;
  margin: 0;
  box-sizing: border-box;
}
/*Chrome*/
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 27px;
  width: 15px;
  background: linear-gradient(to right, #ffffff 0%, #ffffff 39%, #ffbdd7 39%, #ffbdd7 61%, #ffffff 61%, #ffffff 100%) 0 no-repeat;
  border-radius: 4px;
  background-size: 100% 17px;
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.5);
  transition: box-shadow .3s;
}
input[type=range]:focus::-webkit-slider-thumb {
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.5)
}
/*Firefox*/
input[type=range]::-moz-range-thumb {
  height: 27px;
  width: 15px;
  background: linear-gradient(to right, #ffffff 0%, #ffffff 39%, #ffbdd7 39%, #ffbdd7 61%, #ffffff 61%, #ffffff 100%) 0 no-repeat;
  border-radius: 4px;
  background-size: 100% 17px;
  border: none;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.5);
}
input[type=range]::-moz-range-track {
  background: none;
}
/*IE 11 and Edge*/
input[type=range]::-ms-track {
  color: transparent;
  background: none;
  border: none;
}
input[type=range]::-ms-thumb {
  height: 27px;
  width: 15px;
  background: linear-gradient(to right, #ffffff 0%, #ffffff 39%, #ffbdd7 39%, #ffbdd7 61%, #ffffff 61%, #ffffff 100%) 0 no-repeat;
  border-radius: 4px;
  background-size: 100% 17px;
  border: none;
  margin-top: 3px;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.5);
}
input[type=range]::-ms-fill-lower {
  background: none;
}
input[type=range]::-ms-fill-upper {
  background: none;
}

<input type="range">

有关跨浏览器范围输入样式的有用博客文章可以在这里找到.