我正在使用svg图像作为背景。我正在尝试使用CSS3,background-size: 100% 100%;但即使在应支持CSS3的浏览器(例如Chrome)中,它也似乎无法正常工作。
background-size: 100% 100%;
如果您查看此站点,将会看到#special-post article(在食物图片的右侧/下方)带有红色横幅背景的背景。请注意,当您缩小窗口时,背景图像的高度会下降以保持其比例,而不是像我想要的那样拉伸。
#special-post article
编辑:我在FireFox上检查了它,它可以正常工作…所以这似乎是一个webkit问题。
编辑:我在Safari上检查了它,它有效!因此,看来我的问题仅与Chrome有关。
(PS:我熟悉这个替代解决方案,使用img标签,但我宁可不使用它。)
img
解决方法:
打开.svg文件,<svg>在开始处找到标签,并在其中添加以下属性:
.svg
<svg>
preserveAspectRatio="none"