zoukankan      html  css  js  c++  java
  • CSS背景图片自适应 根据浏览器分辨率大小自动伸缩

    一、现背景图片的自适应分辨率:

    <body>
        <div id="web_bg" style="position:absolute; 99%; height:99%; z-index:-1"> 
        <img style="position:fixed;" src="<%=path%>/file/img/welcome_bkg.jpg" height="98%" width="99%" /> 
        </div>
    </body>

    二、3种方法使背景图随电脑分辨率改变,兼容新老办法

    1、尝试以下css代码,对每个分辨率设置不同的背景图片:

    /* 大屏幕 */
    @media (min- 1200px) { ... }
      
    /* 平板电脑和小屏电脑之间的分辨率 */
    @media (min- 768px) and (max- 979px) { ... }
      
    /* 横向放置的手机和竖向放置的平板之间的分辨率 */
    @media (max- 767px) { ... }
      
    /* 横向放置的手机及分辨率更小的设备 */
    @media (max- 480px) { ... }

    2、利用css3新属性:background-size
    具体使用方法可以百度:css3 background-size

    3、利用绝对定位方法,例如背景图是body层的,可以在body里建立一个div,div中插入img标签,也就是你的背景,长宽是100%,div的长宽也是100%(body、html标签要在css中设置长宽100%,常被忽略,虽然看似没有,但是有效的),代码例如:

    <style type="text/css">
    html, body { 100%; height:100%; margin:0; padding:0;}
    .divBg { position:absolute; left:0; top:0; height:100%; 100%;}
    .divBody{ position:absolute; left:0; top:0; height:100%; 100%; text-align:center;}
    </style>
    <div class="divBg"><img src="/uploads/allimg/130827/1035506194-0.gif" height="100%" width="100%" /></div>
    <div class="divBody">
        <div class="yourcss">
            <h1>文字内容在这里,不受影响</h1>
            <h1>文字内容在这里,不受影响</h1>
            <h1>文字内容在这里,不受影响</h1>
            <h1>文字内容在这里,不受影响</h1>
            <h1>文字内容在这里,不受影响</h1>
        </div>
    </div>

    类似的,如果想要做固定区域的背景图,一样可以相对于父级元素长宽设定。
    如图:

  • 相关阅读:
    python字符串格式化 %操作符 {}操作符---总结
    Python中TKinter模块中的Label组件
    Python中urlopen()介绍
    Python中else语句块(和if、while、for、try搭配使用)
    Python文件操作汇总
    python socket 编程之三:长连接、短连接以及心跳
    python 源代码分析之调试设置
    python 调用shell或windows命令
    python socket 编程之二:tcp三次握手
    python socket 编程之一:编写socket的基本步骤
  • 原文地址:https://www.cnblogs.com/BluceLee/p/13714334.html
Copyright © 2011-2022 走看看