CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图
技术的新发展,除计算机可以接入互联网之外,平板电脑、智能手机、智能电视等其他设备均可访问互联网。在多设备时代,构建多屏体验也不是听说的那么难。 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点基础的CSS语法,在移动互联时代,难道我们就这样落伍了??好好学习吧,看完《CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation》,给自己的未来打气!
5.1 设定背景图的大小
在CSS 3出现之前,背景图片的尺寸是由图片的实际尺寸决定的。如果同样的图片要在多个不同的地方作为背景的话,就必须用制图工具做成不同的尺寸,这一方面加大了开发者的工作量,另一方面也占用了更多的磁盘空间和网络空间。在CSS 3中,开发者可以使用background-size属性来规定背景图片的尺寸,这就可以在不同的环境中重复使用背景图片了。例如下面的代码:
div{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
最基本的用法当然是直接使用长度单位或者百分比来指定背景的尺寸,其中第1个值是宽度,第2个值是高度。如果只设置一个值,则高度默认是auto。
background-size还有两个可选项:cover和contain。这两个选项都不会造成图像比例失真。其中cover相当于宽度等于元素宽度、高度设为auto的情况;而contain则相当于高度等于元素高度、宽度设为auto的情况,下面举例说明。
首先,先设置一个高度和宽度均为300像素的容器,然后将一张1600 × 1200尺寸的图片设置为图片的背景:
<style>
.container{
background:url(naicha.jpg) no-repeat;
border: 2px solid black;
margin:auto;
width:300px;
height:300px;
}
</style>
<div class="container"></div>
效果如图5.1所示,由于背景取决于背景图片的尺寸,但背景图片太大,导致实际只显示了原图的左上角的部分。
图5.1 原始图片背景
下一步加上background-size,效果如图5.2所示。
<style>
.container{
background:url(naicha.jpg) no-repeat;
background-size: 100% auto; /*设置宽度100%,高度自动*/
/*使用background-size: 100% auto; 等效于使用background-size: contain; */
-webkit-background-size: 100% auto;
border: 2px solid black;
margin:auto;
width:300px;
height:300px;
}
</style>
<div class="container"></div>
现在读者可以发现图片的全貌展现出来了,宽度等于容器宽度,高度则根据原图比例生成,最终得到和原图比例一致的背景图片,使用background-size: contain;等效于使用background-size: 100% auto;。
如果想占满容器的高度,则只需设置background-size: auto 100%;或者background-size: cover;即可,效果如图5.3所示。
图5.2 background-size: contain效果
图5.3 background-size: cover效果
注意:background-size一定要在指定图片后设定,否则不会生效。
最后来个书的封面图吧,有学习的一起交流
CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图的更多相关文章
- CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(4)构造尺寸更灵活的背景
相比传统的图片背景来说,使用CSS构造背景色不仅可以降低网络传输的开销,更由于其尺寸的可控性受到开发者的青睐. 如设计师设计了一张背景图片作为标题背景,如图5.18所示.对于用电脑浏览网页的用户来说, ...
- 【原创】CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(5)使用放射渐变制作光影效果
阴影效果通常用来表现光线投射在物体上的感觉,如果想制作一个如图5.19所示的文字光影效果,就可以使用背景的线性渐变进行构建. 图5.19可以看到有类似光束照射文字的效果,很好地突出了文字.这实现起来很 ...
- CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(2)CSS3利用图层叠加实现多背景
CSS 3允许设置多个背景图片,每个背景图片占一层,层的上下按照在CSS中书写的顺序来定,最先写的背景在最上层,每层图片定义使用英文逗号隔开. 例如下面的代码: background:url(http ...
- CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(3)线性渐变
线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: .test{ background:linear ...
- 《Python高效开发实战》实战演练——内置Web服务器4
<Python高效开发实战>实战演练——开发Django站点1 <Python高效开发实战>实战演练——建立应用2 <Python高效开发实战>实战演练——基本视图 ...
- 《Python高效开发实战》实战演练——基本视图3
在完成Django项目和应用的建立后,即可以开始编写网站应用代码,这里通过为注册页面显示一个欢迎标题,来演示Django的路由映射功能. 1)首先在djangosite/app/views.py中建立 ...
- 《Python高效开发实战》实战演练——建立应用2
为了在项目中开发符合MVC架构的实际应用程序,需要在项目中建立Django应用.每个Django项目可以包含多个Django应用.建立应用的语法为: #python manage.pystartapp ...
- 《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用
8.3.1 安装和配置 运行Gulp需要Node.js环境,请参看第二章内容搭建Node.js环境.使用NPM全局安装Gulp,命令如下: npm install gulp-cli –g 然后,在项目 ...
- <c ss高效开发实战>看完了,Bootstrap学习是关键
Bootstrap果真给我们带来了很多便利,学习CSS,必须要掌握很多框架和快速学习的方法. 这本书看完了,也写过几篇读书笔记,墙裂推荐.不上书封面了,只上书的导图. 这里说几点学习CSS的心得 1. ...
随机推荐
- HTML总结
几个知识点: HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML框架结构: <!DOCTYPE html> <html> < ...
- pyqt5-为QListWidget添加右键菜单
如何在pyqt5下为QListWidget添加右键菜单? 能百度到的均是pyqt4下的,有些貌似并不好用. 在尝试了很多方法后,下面贴出可用的方法: from PyQt4 import QtCore, ...
- Smokeping -- 监控网络质量
1.下载fping.echoping.smokeping 链接:http://pan.baidu.com/s/1pL4HLYb 密码:fxe2 2.安装依赖包 yum install -y perl ...
- python基础之编码问题
python基础之编码问题 本节内容 字符串编码问题由来 字符串编码解决方案 1.字符串编码问题由来 由于字符串编码是从ascii--->unicode--->utf-8(utf-16和u ...
- Struts2 token禁止重复提交表单
如果服务器响应慢的情况下,用户会重复提交多个表单,这时候有两种设计思想: 1.在客户端使用JS技术,禁止客户重复提交表单.但是这样会使一些不使用浏览器方式登陆的人比如使用底层通信来攻击你的服务器 2. ...
- JavaScript indexOf() 方法 和 lastIndexOf() 方法
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索. 语法: in ...
- Android SDK 墙内更新方法 速度杠杠的
- Eclipse JEE 安装JBPM 4.4 GPD
回顾往昔,发现自己好久没写博客了,想想以前自己是多么热衷于写博客分享,虽然分享的都是比较基础的东西,但每每看到访问量不断增加的时候内心还是爽爽的. 时间过的真的很快,离开学校和团队已经一个月了.来到了 ...
- MongoDB的基本操作
环境:CentOS6.8 Mongodb3.2.10 启动 启动mongoDB服务器 # service mongod start 启动mongoDB客户端 # mongo 该客户端是一个JavaS ...
- python基础-RE正则表达式
re 正则表示式 正则表达式(或 RE)是一种小型的.高度专业化的编程语言,(在Python中)它内嵌在Python中,并通过 re 模块实现.正则表达式模式被编译成一系列的字节码,然后由用 C 编写 ...