拉伸SVG背景图片?

时间:2016-09-09 19:25:07

标签: css css3 svg background-image

拉伸背景图片很容易:

.stretched-logo-bg {
    background: url("../img/curve.png") center center no-repeat;
    background-size: 100% 100%;
}

这不适用于SVG背景但

.stretched-logo-bg {
    background: url("../img/curve.svg") center center no-repeat;
    background-size: 100% 100%;
}

它不会被拉伸,它将保持其纵横比并且只是居中。

至少在Chrome 52中

2 个答案:

答案 0 :(得分:5)

如果你需要覆盖你正在显示的SVG的preserveAspectRatio,你可以使用SVG fragment identifier来做到这一点。

.stretched-logo-bg {
    background: url("../img/curve.svg#svgView(preserveAspectRatio(none))") center center no-repeat;
    background-size: 100% 100%;
}

答案 1 :(得分:3)

我不相信你可以像使用PNG那样使SVG扭曲。

但是,如果您主要支持现代浏览器,则可以将preserveAspectRatio="none"属性添加到SVG标记。

例如:

<svg version="1.1" preserveAspectRatio="none" .. etc`