站長(zhǎng)資訊網(wǎng)上一篇文章中我們了解了設(shè)置背景圖重復(fù)的方法，請(qǐng)看《如何使用css設(shè)置背景圖的重復(fù)與否》。這次我們來了解一下設(shè)置背景圖大小的方法，有需要的可以參考參考。
當(dāng)我們想讓我們手中的背景圖將整個(gè)畫面都占住的時(shí)候，應(yīng)該怎么去做呢？
來看一下小栗子吧。
<style> div{ background-image: url("images/3.jpg"); background-repeat:no-repeat; background-size: 400px; } </style> </head> <body><div> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> </div> </body>
這個(gè)小例子的結(jié)果是
可以看到，當(dāng)我們?cè)诟淖兡骋粋€(gè)屬性的值時(shí)，這個(gè)背景也隨著值的改變而變大了。那我們?cè)诳纯催@個(gè)屬性是什么呢？可以看到我們修改的是background-size這個(gè)屬性的值。
那我們就來看看這個(gè)屬性的意思吧。
background-size 屬性規(guī)定背景圖像的尺寸。圖片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同時(shí)縮放到元素的可用空間的尺寸。
來看看這個(gè)屬性的語法吧。
background-size: length|percentage|cover|contain;
這個(gè)值的解釋，我就直接做成一個(gè)表格了，可以去看看。
推薦學(xué)習(xí)：css視頻教程
