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%;}