定义元素背景设置 background-size属性cover自适应填充背景,background-size: 100% 100%; background-size: 左右比例 上下比例;
再介绍几个特殊属性:
background-clip :
background-origin :
background-size :背景尺寸。
background-break :
IE兼容background-size添加下面属性
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( sizingMethod='scale');——————————————————————以下兼容谷歌/IE————————————————————————————
如要保留原图片比例
background-size: cover;
拉伸到和容器一样大小
sizingMethod='scale'全填充则设置为
background-size: 100% 100%;
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>让IE兼容background-size的方法</title><style>.bgpic { background-image: url('http://img0.bdstatic.com/img/image/6992fdda3cc7cd98d10273a6b34233fb80e7aec90cc.jpg'); background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( sizingMethod='scale');}</style></head><body> <div class="bgpic" style="200px;height:100px;"></div></body></html> 兼容最好,最强大的一种用Image充当背景。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用img标签实现补充全屏效果</title> <style> body{ position: absolute; overflow:hidden; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 0; } </style> </head> <body > <img runat="server" id="stretch" src="http://img0.bdstatic.com/img/image/6992fdda3cc7cd98d10273a6b34233fb80e7aec90cc.jpg" style=" 100%; height:100%;position: absolute;z-index: -1;" /> </body> </html>