您现在的位置:首页 >> 前端 >> 内容

CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(4)构造尺寸更灵活的背景

时间:2014/12/13 10:54:23 点击:

  核心提示:相比传统的图片背景来说,使用CSS构造背景色不仅可以降低网络传输的开销,更由于其尺寸的可控性受到开发者的青睐。如设计师设计了一张背景图片作为标题背景,如图5.18所示。对于用电脑浏览网页的用户来说,标...

相比传统的图片背景来说,使用CSS构造背景色不仅可以降低网络传输的开销,更由于其尺寸的可控性受到开发者的青睐。

如设计师设计了一张背景图片作为标题背景,如图5.18所示。对于用电脑浏览网页的用户来说,标题基本不存在折行现象,布局也基本是固定宽度的,因此直接使用设计师给出的背景图即可。但是这个页面主要是在手机上显示,标题根据长度不同可能占1行,也可能占3行,如果采用图片就必须根据不同的情况放不同的背景图,实现起来很复杂。

CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(4)构造尺寸更灵活的背景

<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+zbw1LjE4ICDJ6LzGyqa4+LP2tcSxs76wPC9wPgo8cD66w9Ta1eLVxbGzvrDNvMq1vMrKx7TT1/O1vdPS08nJ7tfPwLbJq72lseTWwb3Px7O1xMC2yavU2b2lseTWwcnuwLbJq6OsxMfDtNaxvdOyydPDtuDJq7LKJiMyMDU0MDu1xM/f0NS9pbHktqjS5dH5yr28tL/Jo7o8L3A+CjxwPjxwcmUgY2xhc3M9"brush:java;">.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方案代替图片,如果标题折行,则自动撑大标题区域。不管几行都可以完美适配,具有非常好的灵活性,而且大大降低了实现的复杂度,同时也节省了图片加载造成的网络流量,可谓一举多得。


有学习的一起交流

CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(4)构造尺寸更灵活的背景

CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(4)构造尺寸更灵活的背景


Tags:CS SS S高 高效 
作者:网络 来源:kgsew的专栏