zoukankan      html  css  js  c++  java
  • 背景图片铺满全屏的方法

    1.css3有一个属性:background-size:cover;可以让背景图片完全覆盖屏幕,但是IE9以下浏览器无效。

    2.IE有个滤镜:

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/body-bg.png', sizingMethod=scale);

    经测试,没有什么效果。

    3.有一种方法是:单独在body上放一个div,里面只放一个img,将该div定位最下方。ie,其他浏览器均可,但是img会变形(如果图片大小和网页内容宽高一致,变形不明显,但是一般页面的部分内容是动态加载的,高度不固定),影响视觉效果。不过如果你的背景图片比较有规律的话,可以使用该方法。

    <div id="div1"><img src="./images/content_bg.png" /></div>
    div#div1{
        position:fixed;
        top:0;
        left:0;
        bottom:0;
        right:0;
        z-index:-1;
    }
    div#div1 > img {
        height:100%;
        width:100%;
        border:0;
    }

    总结:如果要实现背景全屏又不会有明显变形,在设计时,背景图片边缘颜色最好是纯色或者渐变。

    
    
  • 相关阅读:
    Android Studio基本使用
    convlstm学习资料
    Java重写与重载
    Java继承的缺点
    long转int
    解决RubyMine中puts中文显示乱码的问题
    Ruby入门1
    Ruby学习笔记
    matplotlib绘制饼状图
    python强大的绘图模块matplotlib示例讲解
  • 原文地址:https://www.cnblogs.com/sapho/p/5640529.html
Copyright © 2011-2022 走看看