使响应背景图像顶部的矩形框的响应高度

时间:2016-08-06 17:52:48

标签: html css twitter-bootstrap

enter image description here我在背景中有响应图像,在它上面我有矩形框。随着图像高度的降低,我需要降低高度。我可以使用@media查询实现它,但似乎我必须编写许多屏幕大小。有没有更好的解决方案可以在没有@media查询的情况下实现它,如果没有@media查询可以少写它。

Plunker link click to see

HTML

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding">

               <div  class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding backgroundImage">
                   <div class="graybox">
                   </div>
               </div>    
             </div>    
    </div>
  </body>
</html>

CSS

        .backgroundImage
        {
            background-image: url('data:image/jpeg;base64,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');
            background-repeat:no-repeat;
            height: 800px;
            width: 100%;
            -webkit-background-size: cover;
            -moz-background-size: 100% auto;
            -o-background-size: cover;
            background-size: 100% auto;
        }

        .graybox{
            width: 80%;
            background: BLACK;
            display: inline-block;
            margin-left: 10%;
            margin-top: 106px;
            height: 20%;
            opacity: 0.5;
        }

    @media (max-width: 1240px) and (min-width:1100px){
       .graybox{ 
            height : 40%;
       }
    }
    @media (max-width: 1139px) and (min-width:760px){
        .graybox{ 
            height : 30%;
       }

}

0 个答案:

没有答案