我有一张SVG图片,希望它能够完全覆盖一个容器,并保持其独特的边缘。使用
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://svgshare.com/i/RWM.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>
cover
会等比例缩放图像,但我的图片有非常特定的边缘,我想保持所有边缘可见。 - kero