代码之家 › 专栏 › 技术社区 › Guy Louzon

将响应图像设置为html中的背景,并在顶部显示菜单

background-image responsive-design twitter-bootstrap css html

0

Guy Louzon · 技术社区 · 7 年前

我希望一个图像可以完全显示在屏幕上,并在上面显示菜单,这样当菜单打开时不会有任何滚动:

我想添加一个导航栏上面的图像,这意味着图像将在背景中

我试图在div背景下显示图像,但这会破坏响应能力。。。

以下是目前为止该页面的工作代码:

        .content {
          padding-right: 0px;
          padding-left: 0px;
        }
    
        img {
            max-width: 100%;
        }

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script
              src="https://code.jquery.com/jquery-3.3.1.min.js"
              integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
              crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



<div class="container-fluid ">
  <div class="row">
    <div class="col-md-1 content">

        <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97600&w=350&h=600">

    </div>
    </div>
  </div>

0 回复 | 直到 7 年前