文档章节

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

柯南和由美
 柯南和由美
发布于 2014/12/12 14:34
字数 443
阅读 20
收藏 0

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


有学习的一起交流


© 著作权归作者所有

柯南和由美
粉丝 8
博文 41
码字总数 31322
作品 0
海淀
私信 提问
CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图

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

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

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

woIwoI
2014/12/12
0
0
Sass和LESS-动态CSS技术

一、简介 二、Sass/Scss的使用 变量 注释 中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写,以及简单的样式说明。但是,你也并不希望每个浏览网站源码的人都能看到所...

dhb_oschina
2016/05/17
60
0
2014 年 15 款最棒的 HTML&CSS 框架

现在,我们来介绍 2014 年推荐给 Web 设计师的 15 款 HTML&CSS 框架。阅读下面的框架列表,跟我们分享你的看法吧:) CSS 框架 1) Toast Toast 是一款让所有设计都尽可能简单的 CSS 框架,但...

oschina
2014/01/15
17K
28
【AngularJs学习笔记五】AngularJS从构建项目开始

AngularJs学习笔记 【AngularJs学习笔记一】Bower解决js的依赖管理 【AngularJs学习笔记二】Yeoman自动构建js项目 【AngularJs学习笔记三】Grunt任务管理器 【AngularJs学习笔记四】Grunt +...

陶邦仁
2016/01/26
370
0

没有更多内容

加载失败,请刷新页面

加载更多

任正非对华为热点问题的回应亮了,终于知道华为为什么能扛过这一次的冲击!

任正非对华为热点问题的回应亮了,终于知道华为为什么能扛过这一次的冲击! 如果你是华为的老板,看到一条传遍网络的“美国封锁华为”、“华为禁令”的消息,你会怎么办? 昨天上午,华为创始...

forespider
37分钟前
1
0
Java HTTP 组件库选型看这篇就够了

最近项目需要使用 Java 重度调用 HTTP API 接口,于是想着封装一个团队公用的 HTTP client lib. 这个库需要支持以下特性: 连接池管理,包括连接创建和超时、空闲连接数控制、每个 host 的连...

Java面经
38分钟前
2
0
nginx 重启

在 nginx.config 配置目录下 输入命令: nginx -s reload 在 nginx 中,如果我修改了一个配置文件,或者新增了一个配置文件。按照群里网友的描述,我需要关闭 nginx,或者重启 nginx,比较麻...

MrBoyce
39分钟前
0
0
Cesium中级5 - Terrain 地形

Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ CesiumJS支持对与水流相关的海洋、湖泊和河流以及全球高分辨率地形进行流式处理和可视化。查看山峰、山谷...

Cesium中文网
52分钟前
0
0
搭建jupyter+nginx服务

Tips:该文章面向Mac和centos用户,如果是Windows用户,请先安装虚拟机。 概述 Jupyter Notebook(此前被称为 IPython notebook)是一个交互式笔记本,支持运行 40 多种编程语言。 Jupyter ...

阿dai学长
53分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部