相比传统的图片背景来说，使用css构造背景色不仅可以降低网络传输的开销，更由于其尺寸的可控性受到开发者的青睐。
如设计师设计了一张背景图片作为标题背景，如图5.18所示。对于用电脑浏览网页的用户来说，标题基本不存在折行现象，布局也基本是固定宽度的，因此直接使用设计师给出的背景图即可。但是这个页面主要是在手机上显示，标题根据长度不同可能占1行，也可能占3行，如果采用图片就必须根据不同的情况放不同的背景图，实现起来很复杂。
图5.18 设计师给出的背景
立即学习“前端免费学习笔记（深入）”；
好在这张背景图实际是从左到右由深紫蓝色渐变至较浅的蓝色再渐变至深蓝色，那么直接采用多色彩值的线性渐变定义样式即可：
.header{ background-image:-webkit-linear-gradient(left,#241a38,#012c57,#031a40); background-image: -o-linear-gradient(left,#241a38,#012c57,#031a40); background-image: -moz-linear-gradient(left,#241a38,#012c57,#031a40); background-image: linear-gradient(left,#241a38,#012c57,#031a40);}
登录后复制
采用CSS方案代替图片，如果标题折行，则自动撑大标题区域。不管几行都可以完美适配，具有非常好的灵活性，而且大大降低了实现的复杂度，同时也节省了图片加载造成的网络流量，可谓一举多得。
有学习的一起交流
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3097028.html
