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

将Uncaught SyntaxError: Unexpected token {和<div class="card col-33" style="width: 16rem; margin-right: 2rem;"> <div class="card-body"> <h5 class="card-title">Card title</h5> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> <div class="card col-33" style="width: 16rem; margin-right: 2rem;"> <div class="card-body"> <h5 class="card-title">Card title</h5> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> <div class="card col-33" style="width: 16rem; margin-right: 2rem;"> <div class="card-body"> <h5 class="card-title">Card title</h5> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div>设为0

margins

Answer 3

尝试background-size: cover或background-size: container。我希望它能解决您的问题。

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

3 个答案: