網頁是怎麼用css實現在pc端,背景圖全屏顯示?
05-20
在不同解析度的屏幕下都是寬高100%顯示,當拉伸窗口時,背景圖超出部分隱藏而不是隨窗口大小而改變寬高。虛心請教下各位大神。
請轉至這個地方:不用vh,vw,vmin,vmax,rem,em單位,不用js,如何獲得一個鎖定高寬比的響應式盒子? - 知乎用戶的回答
GitHub - yujiangshui/jquery-bgimgcenter: bgimgcenter 讓背景圖片 無拉伸、無變形、無縫隙、很居中
需要計算下。看了上面幾個答案,都和我的想法不太一樣,莫非我題意理解錯了?
我常用的做法是:
1、背景圖做成1920*10802、.bg{background:url(bg.jpg) no-repeat center top;}
這是我經常用的代碼:
.bg {width: 100%;height: 100%;background-image: url(../img/bj.png);background-size: 100% 100%;}//這種效果會隨著瀏覽器寬高拉伸,如果網頁內容太多就會拉的太高,圖片會失真。.bg {
width: 100%;height: 100%;background-image: url(../img/bj.png) no-repeat fixed;//圖片不平鋪,不拉伸,固定位置;background-size: 100% 100%;//寬高都是百分百;}//這種比較好用,效果會隨著瀏覽器窗口大小鋪滿,如果網頁內容太多只是內容會隨著滾動條滾動。而圖片固定,不會滾動拉伸;看了這麼多回答。難道不是 cover ?
background: url() top center no-repeat;background-size: cover;
我也研究過題主提出的問題。我的思路是通過JavaScript改變CSS中的背景寬度。
我解決這個問題的方案為:
1.準備一張正方形、高解析度的背景圖片2.先使用JavaScript獲取頁面的寬度和高度。瀏覽器可見區域寬度獲取方法:document.body.clientWidth瀏覽器可見區域高度獲取方法:document.body.clientHeight3.判斷屏幕的長寬比(橫的、豎的、正方形的)4.如果可見區域寬度大於高度,則把背景圖片的寬度設置為可見區域的寬度;如果可見區域高度大於寬度,則把背景圖片的寬度設置為可見區域的高度。(由於背景圖片為正方形,所以能夠完美地全屏顯示。)至此,問題解決。本人才入行五個月,對於這種問題,我一般是這樣寫的:
body {
width: 100%; height: 100%; font-family:"微軟雅黑";background-image: url(../img/footer.png); background-size: 100% 100%;}如有不對,望指教設置一個最大的寬度
推薦閱讀: