css 背景图旋转-使用css让背景图片充满整个屏幕

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

方法一：

	
        
        
        
        
        
            *{
                margin:0; padding:0;
            }
            html,body{
                width: 100%;height: 100%;
            }
            
            body{
                background: url(allnormal.png);
                background-size: 100% 100%;
                background-position: center center;
                overflow: auto;
            }
			
        
    
    
    

方法二：在低版本的ie中

#div {
    width: 100%;
    height:100%;
    background:url('/assets/p-default/images/act/a.png') no-repeat;
    background-size:100% 100%;
    position: relative;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/assets/p-default/images/act/a.png', sizingMethod='scale');
}

问题一：在低版本的ie中，如果图片太大，屏幕上只能显示部分图片

解决：

#div {
    width: 100%;
    height:100%;
    background:url('/assets/p-default/images/act/a.png') no-repeat;
    background-size:100% 100%;
    position: relative;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/assets/p-default/images/act/a.png', sizingMethod='scale');
    -ms-behavior: url('/assets/p-default/css/backgroundsize.min.htc');
    behavior: url('/assets/p-default/css/backgroundsize.min.htc');
}

backgroundsize.min.htc，这是美国大牛写的文件，下载地址：

或者

以上两种方法都不够完美css 背景图旋转，而且图片容易拉伸，导致图片上文字的治疗效果很难看

下面的方法可以彻底解决问题：

我们需要的疗效是

图片以背景的形式充满整个屏幕，不留空白，保持图像的长宽比（图片不改变形状） 图片居中，不出现滚动条 多浏览器支持

以图片bg.jpg为例

CSS3.0最简单、最高效的方式

得益于css3.0中的新属性background-size，可以轻松实现这种疗效。 这里使用fixed和center来定位背景图片，然后使用background-size来填充图片。 具体css如下

html {
  background: url(bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

该样式适用于以下浏览器

这里你会发现ie8及以下版本不支持，这些他妈的浏览器需要添加下面的css来设置兼容性

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";

这种与过滤器兼容的编写方式并不完美。 第一个是图片路径，只能是相对于根目录的路径，或者使用绝对路径； 然后改变图像的长宽比，这就是拉伸和填充的方式。 即便如此，也比留空白好（如果背景图bg.jpg的宽高足够大，可以跳过这一段，变成简单的平铺，比图片变换的效果更容易写） ， 你可以尝试一下）

如果你觉得前面的方法不太满意，那么试试下面的方法

使用img方法实现背景平铺效果

首先在html中添加以下代码

然后使用css实现完整效果（假设图片长度为1024px）

img.bg {
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
}

以下是当屏幕宽度大于1024px时，图片仍然可以显示在中央（注意假设的图片长度）

@media screen and (max-width: 1024px) {
  img.bg {
    left: 50%;
    margin-left: -512px;
  }
}

兼容以下浏览器

这是另一种方法

JQ模拟方式

html部分

CSS部分

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

js部分

$(window).load(function() {
    var theWindow        = $(window),
        $bg              = $("#bg"),
        aspectRatio      = $bg.width() / $bg.height();
    function resizeBg() {
        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg
                .removeClass()
                .addClass('bgheight');
        } else {
            $bg
                .removeClass()
                .addClass('bgwidth');
        }
    }
    theWindow.resize(resizeBg).trigger("resize");
});

支持浏览器

其实我自己一般都用（因为够用了，就不挑了/其实都是我翻译的）

html部分

CSS部分

.bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(bg.jpg) no-repeat #000;
    background-size: cover;
    z-index: -1;
}

如果图片长度不超过1900px，我会添加一个ie过滤器来支持ie8（这里我特意用了绝对路径css 背景图旋转，请知悉，代码长我想砸烂ie）

-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.http://huilang.me/bg.jpg', sizingMethod='scale')";
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://huilang.me/bg.jpg', sizingMethod='scale');

浏览器支持