我在输入type =“ range”上有此“条纹背景”。条纹是垂直的。我无法控制背景高度(条纹高度)。当我更改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;
}

最佳答案

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



#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>

关于css - 使用重复线性渐变更改背景高度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27069425/

10-12 13:11
查看更多