技術的新發展，除計算機可以接入互聯網以外，平板電腦、智能手機、智能電視等其他裝備都可訪問互聯網。在多裝備時期，構建多屏體驗也不是聽說的那末難。 但是這也增加了學習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驗證碼 分享到:
------分隔線----------------------------
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作 聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！ 粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有    
 
|
