我有this SVG image我希望覆盖一个完整的容器,保持其独特的边缘。 background-size: 100% 100%;
似乎是完美的选择,虽然它适用于常规图像,但在这种情况下它不起作用。为什么呢?
(jpeg取自James'回答)
html, body {
background-color: #ddd;
}
.container {
margin: 20px; padding: 20px; border: 1px solid #000;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.container.svg {
background-image: url(https://www.mnkylab.com/tmp/bg.svg);
}
.container.img {
background-image: url(https://images.pexels.com/photos/370799/pexels-photo-370799.jpeg?auto=compress&cs=tinysrgb&h=350);
}
<div class="container svg">
some<br>content<br>makes<br>this<br>large
</div>
<div class="container img">
some<br>content<br>makes<br>this<br>large
</div>
答案 0 :(得分:1)
好的,我在阅读了其他几个主题之后才想出来 - 包括其中有效的主题。
罪魁祸首是viewBox
定义中的<svg>
。当我删除它时,图像按原样缩放。对于safari,我需要添加preserveAspectRatio="none"
。
在:
<svg width="392px" height="499px" viewBox="0 0 392 499" ...
后:
<svg width="392px" height="499px" preserveAspectRatio="none" ...
html, body {
background-color: #ddd;
}
.container {
margin: 20px; padding: 20px; border: 1px solid #000;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.container.svg {
background-image: url(https://www.mnkylab.com/tmp/bg.svg);
}
.container.img {
background-image: url(https://www.mnkylab.com/tmp/bg_noviewbox.svg);
}
<div class="container svg">
some<br>content<br>makes<br>this<br>large
</div>
<div class="container img">
some<br>content<br>makes<br>this<br>large
</div>