技術(shù)的新發(fā)展，除計算機可以接入互聯(lián)網(wǎng)以外，平板電腦、智能手機、智能電視等其他裝備都可訪問互聯(lián)網(wǎng)。在多裝備時期，構(gòu)建多屏體驗也不是聽說的那末難。 但是這也增加了學(xué)習(xí)CSS的難度？不知道如何上手，只懂1點基礎(chǔ)的CSS語法，在移動互聯(lián)時期，難道我們就這樣落伍了？？好好學(xué)習(xí)吧，看完《CSS高效開發(fā)實戰(zhàn):CSS 3、LESS、SASS、Bootstrap、Foundation》，給自己的未來打氣！
5.1 設(shè)定背景圖的大小
在CSS 3出現(xiàn)之前，背景圖片的尺寸是由圖片的實際尺寸決定的。如果一樣的圖片要在多個不同的地方作為背景的話，就必須用制圖工具做成不同的尺寸，這1方面加大了開發(fā)者的工作量，另外一方面也占用了更多的磁盤空間和網(wǎng)絡(luò)空間。在CSS 3中，開發(fā)者可使用background-size屬性來規(guī)定背景圖片的尺寸，這就能夠在不同的環(huán)境中重復(fù)使用背景圖片了。例以下面的代碼：
|
1
2
3
4
5
|
div{background:url(img_flwr.gif);background-size:80px
60px;background-repeat:no-repeat;} |
最基本的用法固然是直接使用長度單位或百分比來指定背景的尺寸，其中第1個值是寬度，第2個值是高度。如果只設(shè)置1個值，則高度默許是auto。
background-size還有兩個可選項：cover和contain。這兩個選項都不會造成圖象比例失真。其中cover相當(dāng)于寬度等于元素寬度、高度設(shè)為auto的情況；而contain則相當(dāng)于高度等于元素高度、寬度設(shè)為auto的情況，下面舉例說明。
首先，先設(shè)置1個高度和寬度均為300像素的容器，然后將1張1600?×?1200尺寸的圖片設(shè)置為圖片的背景：
|
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; /*設(shè)置寬度100%，高度自動*/
生活不易，碼農(nóng)辛苦
------分隔線----------------------------
上一篇 Fragment切換動畫 下一篇 JSP驗證碼 分享到:
------分隔線----------------------------
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學(xué)習(xí)，php手冊，CMS模版制作 聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請聯(lián)系本站，謝謝！ 粵ICP備14040726號-1?? 2015-2020 程序員人生 版權(quán)所有    
 
|
