使用“背景尺寸：100% 100%”时，DIV“背景图像”未延伸到整个 DIV

Question

在我的网站上，我正在构建一个自定义 HSV Color picker。 我决定不使用渐变，而是选择将在 HSV 滑块中使用的 .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>

Answer 2

使margins 和padding 0

#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;
margin :0;
padding :0
}

Answer 3

试试background-size: cover 或background-size: container。希望能解决你的问题。