在網(wǎng)頁(yè)開(kāi)發(fā)中,經(jīng)常會(huì)使用背景圖片來(lái)美化頁(yè)面。有時(shí)候我們需要背景圖片完全顯示,這時(shí)可以使用CSS中的一些屬性來(lái)控制背景圖片的尺寸和位置。下面是一些常用的方法:
/* 1.將背景圖片的尺寸設(shè)置為cover */ background-size:cover; /* 2.將背景圖片的尺寸設(shè)置為100% */ background-size:100%; /* 3.將背景圖片的位置設(shè)置為中心 */ background-position:center; /* 4.將背景圖片的重復(fù)方式設(shè)置為不重復(fù) */ background-repeat:no-repeat; /* 5.將html和body元素的高度設(shè)置為100% */ html,body{ height:100%; }
這些屬性可以單獨(dú)使用,也可以組合起來(lái)使用,以達(dá)到讓背景圖片完全顯示的效果。例如,將背景圖片的尺寸設(shè)置為cover,再將位置設(shè)置為中心,加上不重復(fù)和html和body元素的高度設(shè)置為100%,就可以實(shí)現(xiàn)背景圖片全顯的效果了。
除了以上的方法,使用CSS3中的background-size屬性,也可以達(dá)到讓背景圖片全顯的效果。可以將background-size的值設(shè)置為auto 100%,這樣就可以讓背景圖片的高度自適應(yīng),并且寬度鋪滿整個(gè)容器了。
/* CSS3中使用background-size實(shí)現(xiàn)背景圖片全顯 */ background-size:auto 100%;
當(dāng)然,有些時(shí)候,背景圖片會(huì)被容器元素的邊框或者padding覆蓋部分,這時(shí)可以使用box-sizing屬性,將元素的邊框和padding計(jì)入元素的總寬度和高度中,以達(dá)到讓背景圖片完全顯示的效果。
/* 將元素的box-sizing設(shè)置為border-box */ box-sizing:border-box;
總之,根據(jù)實(shí)際情況選擇合適的方法和屬性,就能輕松地讓背景圖片完全顯示,讓網(wǎng)頁(yè)更加美觀。