实现背景图片自适应。

最新推荐文章于 2023-02-02 17:21:11 发布

泰坦不认识尼克号

最新推荐文章于 2023-02-02 17:21:11 发布

阅读量1.1k

点赞数

分类专栏：页面例子 http://write.blog.youkuaiyun.com/category 文章标签： jQuery bootstrap 背景图片自适应

本文链接：https://blog.youkuaiyun.com/qq_36727980/article/details/70568503

版权

页面例子同时被 2 个专栏收录

5 篇文章

订阅专栏

http://write.blog.youkuaiyun.com/category

3 篇文章

订阅专栏

所需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分辨率全屏下效果：