相比传统的图片背景来说,使用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方案代替图片,如果标题折行,则自动撑大标题区域。不管几行都可以完美适配,具有非常好的灵活性,而且大大降低了实现的复杂度,同时也节省了图片加载造成的网络流量,可谓一举多得。

有学习的一起交流

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

  1. CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图

    技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点 ...

  2. 【原创】CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(5)使用放射渐变制作光影效果

    阴影效果通常用来表现光线投射在物体上的感觉,如果想制作一个如图5.19所示的文字光影效果,就可以使用背景的线性渐变进行构建. 图5.19可以看到有类似光束照射文字的效果,很好地突出了文字.这实现起来很 ...

  3. CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(2)CSS3利用图层叠加实现多背景

    CSS 3允许设置多个背景图片,每个背景图片占一层,层的上下按照在CSS中书写的顺序来定,最先写的背景在最上层,每层图片定义使用英文逗号隔开. 例如下面的代码: background:url(http ...

  4. CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(3)线性渐变

    线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: .test{ background:linear ...

  5. 《Python高效开发实战》实战演练——内置Web服务器4

    <Python高效开发实战>实战演练——开发Django站点1 <Python高效开发实战>实战演练——建立应用2 <Python高效开发实战>实战演练——基本视图 ...

  6. 《Python高效开发实战》实战演练——基本视图3

    在完成Django项目和应用的建立后,即可以开始编写网站应用代码,这里通过为注册页面显示一个欢迎标题,来演示Django的路由映射功能. 1)首先在djangosite/app/views.py中建立 ...

  7. 《Python高效开发实战》实战演练——建立应用2

    为了在项目中开发符合MVC架构的实际应用程序,需要在项目中建立Django应用.每个Django项目可以包含多个Django应用.建立应用的语法为: #python manage.pystartapp ...

  8. 《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用

    8.3.1 安装和配置 运行Gulp需要Node.js环境,请参看第二章内容搭建Node.js环境.使用NPM全局安装Gulp,命令如下: npm install gulp-cli –g 然后,在项目 ...

  9. <c ss高效开发实战>看完了,Bootstrap学习是关键

    Bootstrap果真给我们带来了很多便利,学习CSS,必须要掌握很多框架和快速学习的方法. 这本书看完了,也写过几篇读书笔记,墙裂推荐.不上书封面了,只上书的导图. 这里说几点学习CSS的心得 1. ...

随机推荐

  1. python 利用 setup.py 手动安装django_chartit

    手动安装django_chartit库 1 下载压缩包 2 解压到python安装目录下,文件夹名为django_chartit,并检查文件夹下是否有setup.py文件 3 在cmd中进入djang ...

  2. Java连接程序数据源

    在实际应用中,可能需要根据表名动态地改变数据源,比如在程序数据集中,通过传进的表名参数,到数据库取出对应的表作为数据源.例如,FineReport是通过AbstractTableData抽象类来读取数 ...

  3. 【原】移动web动画设计的一点心得——css3实现跑步

    今年3月份,由于公司业务需要,我转岗到微信产品部,离开了TID团队,人都是有感情的动物,更何况在一个团队呆了快 3 年,心中十分舍不得,鬼哥说了“天下没有不散的宴席...”,在我的世界里又多了一次离别 ...

  4. 疑难杂症——EF+Automapper引发的查询效率问题解析

    前言:前面总结了一些WebApi里面常见问题的解决方案,本来打算来分享下oData+WebApi的使用方式的,奈何被工作所困,只能将此往后推了.今天先来看看EF和AutoMapper联合使用的一个问题 ...

  5. 通过COOKIE欺骗登录网站后台

    1.今天闲着没事看了看关于XSS(跨站脚本攻击)和CSRF(跨站请求伪造)的知识,xss表示Cross Site Scripting(跨站脚本攻击),它与SQL注入攻击类似,SQL注入攻击中以SQL语 ...

  6. VPN使用指南|稳定的VPN|

    之前一直用GoagentFQ,但是有时不太稳定,网速也不是很快,然后就试用了云梯VPN,感觉还不错,网速挺快,也比较稳定.http://opticalvpn.com/?r=72ec52481ab8d2 ...

  7. CCPC2016沈阳站

    A.模拟 B.模拟 C(hdu5950):(矩阵快速幂) 题意:求f(n)=2f(n-2)+f(n-1)+n^4 分析:矩阵快速幂,(f(n),f(n-1),n^4,n^3,n^2,n,1) 注意:矩 ...

  8. hashlib 和 hmac

    import hashlib hash = hashlib.md5([bytes('SALT_STRING', encoding='utf-8’)]) #SALT_STRING :加盐 hash.up ...

  9. GitHub新手快速入门日常操作流程

    GitHub新手快速入门日常操作流程 1. 注册帐号 打开https://github.com/,填写注册信息并提交. 2. 登录帐号 打开https://github.com/login,输入注册的 ...

  10. 快速上手php:使用PhpStrom调试php

    闲话 使用phpStrom的时候居然不打印到控制台,要打印测试的话就要输出到页面,目前我还不知道有什么好办法像jsp一样输出到页面的同时也打印到控制台.这种做法还是比较烦的,特别出问题需要调试的时候. ...