Question

我在输入类型=“范围”上有这个“条纹背景”。条纹是垂直的。我无法控制背景高度（条纹高度）。当我更改background height值时，高度保持输入类型=“范围”的100％。你能帮忙吗？

HTML：

<form oninput="amount.value=userlevelofsurfing.value">
                <div class="range">
                    <input id="levelrange" type="range" min="0" max="10" value="5" name="userlevelofsurfing">
                 <output id="levelrangeoutput" name="amount" for="userlevelofsurfing">5</output>
  </div>
</form>

CSS：

#levelrange {
background: repeating-linear-gradient(
  to right,
  rgba(255,255,255,0),
  rgba(255,255,255,0) 10%,
  #06b4c8 10%,
  #06b4c8 30%,
  rgba(255,255,255,0) 30%,
  rgba(255,255,255,0) 100%
);
background-size: 9.7% 5px;
}

Answer 1

您可以通过指定该元素的高度来控制条纹高度：

#levelrange {
    background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 10%, #06b4c8 10%, #06b4c8 30%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 100%);
    background-size: 9.7% 5px;
    height:200px;
}

<form oninput="amount.value=userlevelofsurfing.value">
    <div class="range">
        <input id="levelrange" type="range" min="0" max="10" value="5" name="userlevelofsurfing" />
        <output id="levelrangeoutput" name="amount" for="userlevelofsurfing">5</output>
    </div>
</form>

用重复线性渐变改变背景高度

1 个答案: