CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（1）设定背景图
技术的新发展，除计算机可以接入互联网以外，平板电脑、智能手机、智能电视等其他装备都可访问互联网。在多装备时期，构建多屏体验也不是听说的那末难。 但是这也增加了学习CSS的难度？不知道如何上手，只懂1点基础的CSS语法，在移动互联时期，难道我们就这样落伍了？？好好学习吧，看完《CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation》，给自己的未来打气！
5.1 设定背景图的大小
在CSS 3出现之前，背景图片的尺寸是由图片的实际尺寸决定的。如果一样的图片要在多个不同的地方作为背景的话，就必须用制图工具做成不同的尺寸，这1方面加大了开发者的工作量，另外一方面也占用了更多的磁盘空间和网络空间。在CSS 3中，开发者可使用background-size属性来规定背景图片的尺寸，这就能够在不同的环境中重复使用背景图片了。例以下面的代码：
|
1
2
3
4
5
|
div{background:url(img_flwr.gif);background-size:80px
60px;background-repeat:no-repeat;} |
最基本的用法固然是直接使用长度单位或百分比来指定背景的尺寸，其中第1个值是宽度，第2个值是高度。如果只设置1个值，则高度默许是auto。
background-size还有两个可选项：cover和contain。这两个选项都不会造成图象比例失真。其中cover相当于宽度等于元素宽度、高度设为auto的情况；而contain则相当于高度等于元素高度、宽度设为auto的情况，下面举例说明。
首先，先设置1个高度和宽度均为300像素的容器，然后将1张1600?×?1200尺寸的图片设置为图片的背景：
|
1
2
3
4
5
6
7
8
9
10
|
<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 原始图片背景
下1步加上background-size，效果如图5.2所示。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<style>.container{ background:url(naicha.jpg)
no-repeat; background-size:
100% auto; /*设置宽度100%，高度自动*/
------分隔线----------------------------
上一篇 Fragment切换动画 下一篇 JSP验证码
------分隔线----------------------------
最新技术推荐 |