实现背景图片自适应。

来源：互联网发布：数据分析研究生专业编辑：程序博客网时间：2024/05/19 00:48

所需css js

 <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

css部分

 <style type="text/css">    .header{background: url("images/back2.jpg") no-repeat center top;background-position: center center;width:100%;min-height:529px;background-size:100% 100%;padding-top: 30px;position:absolute;}    .first-row div a{float: left;color: #fff;font-size: 22px;font-weight: bold;text-decoration: none;}    .first-row div a img{width: 28px;height: 28px;}    .first-row div ul{float: right;color: #fff;padding-top:5px;}    .first-row div ul li{list-style: none;display: inline;}    .first-row div ul li a{font-size: 17px;padding:0 10px;}    @media(max-width: 867px){      .first-row div ul{font-size: 10px;float:none;}    }    @media(max-width: 260px){      .first-row div ul{display: none;}    }    .second-row{width: 100%;display: block;margin-left: auto;margin-right: auto;margin-top: 50px;color: #fff;margin-bottom: 0px;}    .second-row div img{width: 96px;height: 96px;}    .second-row div h1{letter-spacing:5px;margin-top: 35px;}    .second-row div div{width: 200px;height: 37px;background:#1EC38B;text-align: center;line-height: 37px;margin-top: 35px;}    .second-row div div a{text-decoration: none;color: #fff;}    .third-row{width: 80%;position: relative;top:0px;margin-top: 30px;}    .third-row div img{max-width:100%;margin-bottom: 0px;}    @media(max-width: 590px){      .header{background: url("images/back2.jpg") no-repeat center top;background-position: center center;width:100%;height: 549px;background-size:100%;-webkit-background-size:cover;padding-top: 30px;}    }  </style>

</head>

正文部分

<body>    <!-- header -->    <div class="header">      <div class="container">        <div class="row first-row">          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">            <a>            <img src="images/logo.png">            Bootstone            </a>            <ul>              <li><a>Change log</a></li>              <li><a>Team/Comming soon</a></li>              <li><a>Shop</a></li>              <li><a>Respository</a></li>            </ul>          </div>        </div><!-- first-row -->                <div class="row second-row">          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">            <img src="images/logo.png">            <h1>Write like a NINJA</h1>            <h4>Boostnote is an open source note-taking app made for programmers just like you.</h4>            <div class="center-block"><a href="###">Free Download</a></div>                      </div>                      </div><!-- second-row -->        <div class="row third-row center-block">          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">                 <img src="images/top.png">                 </div>        </div><!-- third-row -->            </div><!--container-->    </div><!-- header -->    <div class="test" style="width:100%;height:400px;background:red;position:relative;"></div>                                                            </body></html>

jQuery部分：

<script type="text/javascript">        var hheight=$(".header").height();        var Cheight=$(".test").css("top",hheight);        $(window).resize(function(){            var hheight=$(".header").height();            var Cheight=$(".test").css("top",hheight);        });            </script>

如果现在红色div后面再次添加div

在引用我的jQuery类比修改class就可以，eg:

Cheight 改为 bheight即可

    <script type="text/javascript">            var hheight=$(".header").height();        var bheight=$(".bottom").css("top",hheight);        $(window).resize(function(){        var hheight=$(".header").height();        var bheight=$(".bottom").css("top",hheight);        });            </script>

1366分辨率全屏下效果：

500分辨率下效果

在线访问地址：

http://htmlpreview.github.io/?https://github.com/wy7365596/BootstoneTwo/blob/master/index.html

0 0