css3背景缩放-HTML网页背景图片根据屏幕尺寸手动缩放CSS

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

立即下单

进入商城

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

腾讯微博和QQ空间的登录背景图片是根据访问者的屏幕尺寸手动缩放的，但似乎是用JQuery代码实现的。 更何况调用jq库会减慢网页的打开时间，而且对兼容性也不好。

前几天用CSS研究了一下样式代码，效果是一样的。 无论图片有多大，它都可以根据屏幕而变化（当然图片越大越好）。 而且，在驱动网页表单大小时css3背景缩放，会手动调整图片大小css3背景缩放，以实现实时交互。 上图中看不到效果。 在这里放一个链接，

CSS代码如下：

#background 
{ 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #211f1f; 
    display:none8;
} 
#background .bg-photo 
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    overflow: hidden;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
} 
#background .bg-photo-1 
{ 
    background: url('../image/alone.jpg') no-repeat center center;
} 
#background-ie { 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #211f1f;
}

HTML代码如下：

<div id="background">
<div class="bg-photo bg-photo-1" style="display: block;"></div>
</div>

转载自：HTML页面背景图片根据屏幕尺寸手动缩放CSS