javascript - 使用 "background-image"时，DIV "background-size : 100% 100%"未延伸到整个 DIV

Question

在我的网站上，我正在构建自定义 HSV Color picker .我没有使用渐变，而是决定选择将在我的 HSV slider 中使用的 .SVG 渐变图像。

我在将该图像放入我的 DIV 背景时遇到问题。

Here's an example .该图像在 Mozilla Firefox 和 Internet Explorer 中都非常适合，但在 Edge 中，它看起来好像只有“高度”是“100%”，而“宽度”是“自动”——至少它不是不在 CSS 中:

#pvdivsliderhue {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
width: auto;
height: 30px;
border-radius: 15px;
background-image: url('images/pvhue.svg');
background-size: 100% 100%;
background-color: green;
display: flex;
}

我将如何解决这个问题？

感谢所有帮助!

Answer 1

SVG 在 Edge 中仍然存在问题。因此，如果您不需要矢量图像，我建议您使用老式的 .png 或 .jpg 图像。

查看工作示例:

/* Demo Styles */
.picker {
  height: 150px;
  width: 200px;
  position: relative;
  margin: 0 auto;
  background-color: #e9e9e9;
}

/* Hue Slider */
#pvdivsliderhue {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  width: auto;
  height: 30px;
  border-radius: 15px;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Hue_alpha.png/900px-Hue_alpha.png');
  background-size: 100% 100%;
  background-color: white;
  display: flex;
}

<div class="picker">
  <div id="pvdivsliderhue"></div>
</div>