超级会员免费看
本文详细讲解了如何在SVG元素上使用样式背景属性实现图片的显示和自适应适配。通过background-color、background-image、background-repeat、background-size和background-position属性，讨论了背景颜色设定、图片重复方式、图片大小调整以及起始位置控制，从而在SVG元素上实现大长图背景的创建。
《元素属性原理详解与应用》讲到了SVG元素viewBox属性的实际应用，能够实现SVG元素在不同手机上的自适应适配（SVG元素的宽高根据手机屏幕大小等比例放大或缩小）。SVG黑科技排版的每一篇文章都少不了精美的图片，那我们如何在SVG元素上显示图片呢？SVG元素显示的图片在不同的手机上如何实现自适应适配呢？今天我们就来接触SVG样式背景属性。
SVG图形的限制
SVG可以绘制各种各样的矢量图形，也可以通过滤镜、渐变等方式丰富图形的色彩，当然还可以通过JavaScript脚本提升图形的交互性，但是有些代码方式公众号平台是不支持的（比如style元素、script元素），不能够完美展示色彩和交互复杂的SVG图形，因此SVG排版需要通过背景图片的形式来展示内容。接下来来了解如何在SVG元素上显示背景图片。
样式背景属性
在SVG元素上显示的背景可以分为两种，一种是背景颜色，使用background-color属
订阅专栏 解锁全文
扫一扫
1354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
