zoukankan      html  css  js  c++  java
  • 首页背景图自适应

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>首页背景图自适应</title>
    <style type="text/css">
    #home_con{ position:relative; 100%; overflow:hidden; height:824px; background:url(images/banner.jpg) no-repeat center center; background-size:100% auto;}
    #home_con .word{ position:absolute; left:50%; 814px; height:114px; margin-left:-407px; color:#fefefe; top:92px; text-align:center;}
    #home_con .word h3{ margin-bottom:8px;}
    #home_con .word h3 span{ font-size:25px; font-weight:bold; line-height:33px; letter-spacing:1px; border-bottom:2px solid #cfd6e4;border-bottom:2px solid rgba(255,255,255,0.35);}
    #home_con .word p span{ font-size:16px; text-align:center; padding:0 21px;}
    #home_con .word a{ display:block; text-align:center; margin-top:28px; font-size:14px; color:#fff; }
    #home_con .word a:hover{ text-decoration:underline;}
    </style>
    </head>
    <body>

    <div id="header"></div>
    <div id="home_con">
      <div class="word">
      <h3><span>SYNERGISTIC INVESTMENT FOR SUSTAINABLE ECONONIC GROWTH</span></h3>
      <p><span>INVESTMENT</span><span>MANAGEMENT</span><span>SYNERGY</span><span>GROWTH</span><span>PROSPERITY</span>
      </p>
      <a href="About.shtml">More About CASIF &gt;</a>
      </div>
    </div>
    <div id="footer"></div>

    </body>
    </html>
    <script>
    $(function(){
    var conH=$(window).height()-$("#header").outerHeight()-$("#footer").outerHeight();
    if($(window).width()/conH>=2.33){
    $("#home_con").height(conH);
    $("#home_con").css({ "background-size":"100% auto"});
    }
    else{
    $("#home_con").height(conH);
    $("#home_con").css({ "background-size":"auto 100%"});
    }

    $(window).resize(function(){
    var conH=$(window).height()-$("#header").outerHeight()-$("#footer").outerHeight();;
    if($(window).width()/conH>=2.33){
    $("#home_con").height(conH);
    $("#home_con").css({ "background-size":"100% auto"});
    }
    else{
    $("#home_con").height(conH);
    $("#home_con").css({ "background-size":"auto 100%"});
    }
    });
    });
    </script>

  • 相关阅读:
    一步一步学习Unity3d学习笔记系1.2 单机游戏和网游的数据验证概念
    一步一步学习Unity3d学习笔记系1.1
    Mongodb 官网驱动2.2.4.26版本 增,删 改,查
    使用Zxing 一维码
    Linq 数据排序,分页
    easyui datagrid 批量编辑和提交数据
    Json序列化为对象方法
    百度地图车辆运动轨迹
    GridView后台绑定数据列表方法
    删除重复数据
  • 原文地址:https://www.cnblogs.com/xiaoky/p/3835445.html
Copyright © 2011-2022 走看看