zoukankan      html  css  js  c++  java
  • css2如何设置全屏背景图片

    每次在做一个网站后台登陆页面的时候,当UI给我一张背景是不规律的背景图片,但是在设置为背景时,总会遇到屏幕大小的问题,导致背景图片有可能平铺。这样UI的效果达不到也会很难看。

    本来我想用body{background: url(img.jpg) no-repeat top center;}的办法来拉伸的,但是在360的兼容模式浏览器就不行了。因为这是CSS3的属性。而CSS2本身没有这个属性,那怎么办呢?!

    可以利用一个DIV层,在里面装载一个IMG标签。然后设置DIV和IMG的大小为100%,并固定到屏幕最底层,这样就实现了完美的拉伸并最大化图片的目的。 

    首先在Body中加入下面的代码:
    代码如下:
    <div id="bg"><img src="img.jpg" /></div>
    然后加入CSS代码:
    div#bg{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index:-1;
    }
    div#bg > img {
    height:100%;
    100%;
    border:0;
    }
    这样就保证了UI的效果!也保证了兼容性。
  • 相关阅读:
    Android Studio基本使用
    convlstm学习资料
    Java重写与重载
    Java继承的缺点
    long转int
    解决RubyMine中puts中文显示乱码的问题
    Ruby入门1
    Ruby学习笔记
    matplotlib绘制饼状图
    python强大的绘图模块matplotlib示例讲解
  • 原文地址:https://www.cnblogs.com/Yirannnnnn/p/4471940.html
Copyright © 2011-2022 走看看