CSS控制背景图片自适应填充布局

阅读更多

背景图片的宽*高：400*200，要设置放背景的容器的宽高是图片宽高的等比例自适应填充才不变形。比如200*100,300*150等

写法1

li.active a{ background-image:url(/statics/images/game_bg.png); background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;}

 写法2

background: url(/bg.png) no-repeat; background-size: 100% 100%;

 css背景色半透明度

background-color: rgba(0, 0, 0, 0.6);

一张图来做背景，突然发现100%和cover图片不一样

background-size：100% 100%;---按容器比例撑满，图片变形；
background-size：cover;---把背景图片放大到适合元素容器的尺寸，图片比例不变。