css3 - 背景圖自定義比例縮小
問題描述
本來新手一枚,在開發(fā)中遇到背景圖不能安自定義比例縮放,用了background-size:cover,圖片要么右半部分不完整,要么下半部分不完整,要怎么做才能鋪滿全屏并且全部顯示出來
問題解答
回答1:body { background-size:cover; text-align:center; /*此部分支持chrome,應(yīng)該也支持firefox*/ background:rgb(246,248,249); background:url(../img/bg.jpg) no-repeat center fixed transparent; background-attachment:fixed; background-size:100% 100%; /*以下是IE部分,使用濾鏡*/ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../img/bg.jpg’,sizingMethod=’scale’); background-repeat:no-repeat; background-position:100%,100%;}回答2:
background-attachment: fixed;background-size: cover;background-repeat: no-repeat;background-image: url(./img/desk4.jpg);background-position: 50% 50%;回答3:
你的意思是你的圖片正好是屏幕的大小?
那除非是你的圖片長寬比例和屏幕比例是一樣的,不然就要圖片變形,要么壓扁,要么變瘦,不然就是你說的情況
回答4:cover是鋪滿,可能圖會(huì)超出。contain是圖完全塞入,可能會(huì)有留白。我也遇到了這個(gè)適配需求,目前的想法是img width height100%低層級(jí)模擬背景。還沒時(shí)間試,你可以先試試。
回答5:cover和contain都是按比例縮放的,不然就用img 100%或者background-size 百分比,要做背景全屏比例要對(duì)
回答6:右邊或者下邊不完整,猜測(cè)background-position并沒有center;
cover是塞滿元素(有裁切),contain是背景最大(留黑邊),這倆都是保持寬高比的;
不要寬高比的話可以試試100% 100%,變形但是能充滿元素而且沒裁切;
必要時(shí)可以調(diào)整元素尺寸,用js動(dòng)態(tài)搞下就行。
回答7:第一種方法:通過定位把背景圖居中,再通過大小為cover調(diào)整背景大小,這樣圖片不會(huì)變形且鋪滿;
p { background-size: cover; background-position: center center;}
第二種方法:通過強(qiáng)制背景圖寬高為100%達(dá)到鋪滿效果,但是圖片容易變形(不推薦)。
p { background-size: 100% 100%;}
相關(guān)文章:
1. javascript - sublime快鍵鍵問題2. javascript - immutable配合react提升性能?3. vue.js - Vue 如何像Angular.js watch 一樣監(jiān)聽數(shù)據(jù)變化4. 配置Apache時(shí),添加對(duì)PHP的支持時(shí)語法錯(cuò)誤5. css - 寫頁面遇到個(gè)布局問題,求大佬們幫解答,在線等,急!~6. javascript - nodejs關(guān)于進(jìn)程間發(fā)送句柄的一點(diǎn)疑問7. javascript - 移動(dòng)端上不能實(shí)現(xiàn)拖拽布局嗎?8. phpstudy8.1支持win11系統(tǒng)嗎?9. 實(shí)現(xiàn)bing搜索工具urlAPI提交10. Apache 已經(jīng)把網(wǎng)站根目錄的改為allow from all了,但是服務(wù)器還是不能訪問?

網(wǎng)公網(wǎng)安備