css3 - 背景圖自定義比例縮小

問題描述

本來新手一枚，在開發中遇到背景圖不能安自定義比例縮放，用了background-size:cover，圖片要么右半部分不完整，要么下半部分不完整，要怎么做才能鋪滿全屏并且全部顯示出來

問題解答

body { background-size:cover; text-align:center; /*此部分支持chrome，應該也支持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：

你的意思是你的圖片正好是屏幕的大??？

那除非是你的圖片長寬比例和屏幕比例是一樣的，不然就要圖片變形，要么壓扁，要么變瘦，不然就是你說的情況

cover是鋪滿，可能圖會超出。contain是圖完全塞入，可能會有留白。我也遇到了這個適配需求，目前的想法是img width height100%低層級模擬背景。還沒時間試，你可以先試試。

cover和contain都是按比例縮放的，不然就用img 100%或者background-size 百分比，要做背景全屏比例要對

右邊或者下邊不完整，猜測background-position并沒有center；

cover是塞滿元素（有裁切），contain是背景最大（留黑邊），這倆都是保持寬高比的；

不要寬高比的話可以試試100% 100%，變形但是能充滿元素而且沒裁切；

必要時可以調整元素尺寸，用js動態搞下就行。

第一種方法：通過定位把背景圖居中，再通過大小為cover調整背景大小，這樣圖片不會變形且鋪滿；

p { background-size: cover; background-position: center center;}

第二種方法：通過強制背景圖寬高為100%達到鋪滿效果，但是圖片容易變形（不推薦）。

p { background-size: 100% 100%;}