-
- 如何让背景图片background在不同尺寸浏览器上显示满屏
苏州网站制作 苏州网站建设 苏州网络公司 苏州网页设计
- 如何让背景图片background在不同尺寸浏览器上显示满屏?相信很多人都会遇到这个排版问题，于是苏州网页制作的小编疯狂的搜索答案。有好多种解决方案。基本上都是围绕background-size这个属性。
<pre>.div{
width:160px;
height:120px;
border:1px solid #ccc;
padding:10px;
background-image:url(bg.jpg);
background-size:cover;
}</pre>
background-size需要两个值，它的类型可以是像素（px）、百分比（%）或是auto，还可以是cover和contain。第一个值为背景图的width，另外一个值用于指定背景图上的height，如果只设定1个值，则第2个默认为auto，但当值为cover和contain时除外。
cover：保持图像的宽高比例，将图片缩放到正好完全覆盖定义的背景区域，其中有一边和背景相同。
好了，一试确实可以，是不是以为大功告成，那你可就错了，不信你试试IE，坑爹的IE，低于IE8的版本画面太美，不敢看。于是乎又各种搜索找解决办法。
<pre>
.div{
background:#00ff00 url(img.jpg) no-repeat;
-moz-background-size:60% 80%;
-webkit-background-size:60% 80%;
-o-background-size:60% 80%;}
background-size:60% 80%;
}
通过滤镜的方法
.div{
background-image: url('file:///F:/test/images/flashbg.jpg');
background-size:
cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='file:///F:/test/images/flashbg.jpg',sizingMethod='scale');
}
注明路径须要一样，并且是绝对路径。
通过htc文件（通过计算屏幕尺寸控制img标签尺寸，模拟background-size:cover;效果）
.selector {
background-size: cover;
-ms-behavior: url(/backgroundsize.min.htc);
}
</pre>
最后苏州网站建设的小编还想到一个方法，不用background-size这个属性，用一个本方法代替，用了一个绝对定位的方法，将背景作为图片，尺寸百分百显示，用js控制最外层的高度。这样实现了满屏的效果，不过有一个缺点是，图片会变形。
- 上一篇：
写给一言不合就打算转行IT行业的小伙伴们一点建议
- 下一篇：
网站优化有需要战术，苏州网站优化总结SEO排名技巧
