css – 拉伸SVG背景图
拉伸背景图片很容易:
.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 中
解决方法
如果您需要覆盖正在显示的SVG的preserveAspectRatio,则可以使用 SVG fragment identifier来执行此操作,例如:
.stretched-logo-bg { background: url("../img/curve.svg#svgView(preserveAspectRatio(none))") center center no-repeat; background-size: 100% 100%; }