CSS 让背景图片铺满全部显示,填满当前div的方法

.class{
   background-image: url('a.jpg');
   background-repeat: no-repeat;
   background-size: 100% 100%;
}

background-size

首先声明
   background-size是一个css3属性。 翻译过来很容易就知道它是用来规定背景尺寸的。
关于浏览器兼容性
    IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+。
用法
   background-size有4个值分别是(length | percentage | cover | contain)。
        length: 它主要是用来规定背景的宽(width)和高(heigth)。eg: background-size: 100px 100px; 
        percentage: 它主要是用来以父元素的百分比来设置背景的宽高。 eg: background-size: 50% 50%;
        length和percentage的用法其实是相似的, 都是通过设置背景的长宽来显示图片。 如果只有一个参数, 则表示另一个参数为auto。
        cover: 它主要表示把图片扩展到足够大, 以使背景图像完全覆盖背景区域。 这里要注意背景图像的某些部分也许无法显示在背景定位区域中。
        eg: background-size: cover;
        contain: 它主要表示把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。eg: background-size: contain;

背景图不平铺
background-repeat: no-repeat;

当内容高度大于图片高度时,背景图像的位置相对于viewport固定
background-attachment: fixed; //此条属性必须设置否则可能无效/

让背景图基于容器大小伸缩
background-size: cover;

标签: CSS让背景图片全部显示


阿里云优惠主机

添加新评论

免责声明
本博客部分内容来自于互联网,不代表作者的观点和立场,如若侵犯到您的权益,请联系[email protected]。我们会在24小时内进行删除。