logo标签列表

使用CSS控制叠加层的大小

htmlcssbootstrap-4
6

这是一个包含Bootstrap轮播组件的简单HTML代码，其中有三张图片可以滑动，并添加了遮罩层以使轮播图标题更加吸引人！在大屏幕上它能够很好地工作，但在小屏幕上，包括移动电话（智能手机），覆盖层的高度会增加超过轮播图的高度！！如何让它们即使在小屏幕上也具有相同的高度？

<!doctype html>
 <html lang="en">
  <head>
   <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"rel="stylesheet">
         <link href="phcoding/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
          <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
           <link href="https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap" rel="stylesheet">
            <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;1,300&display=swap" rel="stylesheet">
             <link href="https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap" rel="stylesheet">
              <title>| Catering Services |</title>
               <style>
.overlay {
position: relative;
width: 100%;
min-height:100%;
background-color: #080d15;
opacity: .5;
z-index:1000;
 }
.carousel .carousel-item {
  height: 500px;
}
.carousel-item img {
    position: absolute;
    object-fit:cover;
    top: 0;
    left: 0;
    max-height: 100%;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  top: 50%;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
  z-index:1000
}
              </style>
             </head>
              <body>
               <section id="home">
                <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
                 <a class="navbar-brand">Catering</a>
                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                   <span class="navbar-toggler-icon"></span></button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav ml-auto">
                     <li class="nav-item-active">
                      <a class="nav-link justin" href="#home">Home</a></li>
                       <li class="nav-item"><a class="nav-link" href="#service">Services</a></li>
                        <li class="nav-item"><a class="nav-link" href="#sample">About Us</a></li>
                         <li class="nav-item"><a class="nav-link" href="#contact">Contact Us</a></li>
                        </div>
                       </ul>
                      </nav>
                     </section>
                   <!---carousel--->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  
    
  <div class="carousel-inner">
  
    <div class="carousel-item active">
                <div class="overlay">
</div>
      <img class="d-block w-100" src="https://images.all-free-download.com/images/graphiclarge/food_picture_03_hd_pictures_167556.jpg" alt="First slide">
    
    <div class="carousel-caption">
    <h5>Bringing the world to your table
    </h5>
  </div>
    </div>
    <div class="carousel-item">
                <div class="overlay">
</div>
      <img class="d-block w-100" src="https://images.all-free-download.com/images/graphiclarge/food_picture_05_hd_picture_167554.jpg" alt="Second slide">
    <div class="carousel-caption">
    <h5>Creating memories that last a lifetime</h5>
    </div>
    </div>
    <div class="carousel-item">
                <div class="overlay">
</div>
      <img class="d-block w-100" src="https://images.all-free-download.com/images/graphiclarge/fruit_juice_and_fruit_stock_photo_167154.jpg" alt="Third slide">
    <div class="carousel-caption">
    <h5>Filling every occasion with great food and service.</h5>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>








       <script src="jsplugins/js/jquery.min.js"></script>
                          <script src="jsplugins/js/bootstrap.bundle.min.js"></script>
                      
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

                       </body>
                        </html>

将img的高度设置为100%。 - Temani Afif
2个回答
2
请您检查以下的代码链接，希望对您有所帮助。您只需要将.overlay和.carousel-item img的min-height:100%或max-height:100%替换为height: 100%;即可。

请参考此链接：https://jsfiddle.net/yudizsolutions/wyh7zvt9/5/

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
    <link href="phcoding/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;1,300&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap" rel="stylesheet">
    <title>| Catering Services |</title>
    <style>
      .overlay {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #080d15;
        opacity: .5;
        z-index: 1000;
      }

      .carousel .carousel-item {
        height: 500px;
      }

      .carousel-item img {
        position: absolute;
        object-fit: cover;
        top: 0;
        left: 0;
        height: 100%;
      }

      .carousel-caption {
        position: absolute;
        right: 15%;
        top: 50%;
        left: 15%;
        z-index: 10;
        padding-top: 20px;
        padding-bottom: 20px;
        color: #fff;
        text-align: center;
        z-index: 1000
      }

    </style>
  </head>

  <body>
    <section id="home">
      <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
        <a class="navbar-brand">Catering</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item-active">
              <a class="nav-link justin" href="#home">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#service">Services</a></li>
            <li class="nav-item"><a class="nav-link" href="#sample">About Us</a></li>
            <li class="nav-item"><a class="nav-link" href="#contact">Contact Us</a></li>
          </ul>
        </div>
      </nav>
    </section>
    <!---carousel--->
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">


      <div class="carousel-inner">

        <div class="carousel-item active">
          <div class="overlay">
          </div>
          <img class="d-block w-100" src="https://images.all-free-download.com/images/graphiclarge/food_picture_03_hd_pictures_167556.jpg" alt="First slide">

          <div class="carousel-caption">
            <h5>Bringing the world to your table
            </h5>
          </div>
        </div>
        <div class="carousel-item">
          <div class="overlay">
          </div>
          <img class="d-block w-100" src="https://images.all-free-download.com/images/graphiclarge/food_picture_05_hd_picture_167554.jpg" alt="Second slide">
          <div class="carousel-caption">
            <h5>Creating memories that last a lifetime</h5>
          </div>
        </div>
        <div class="carousel-item">
          <div class="overlay">
          </div>
          <img class="d-block w-100" src="https://images.all-free-download.com/images/graphiclarge/fruit_juice_and_fruit_stock_photo_167154.jpg" alt="Third slide">
          <div class="carousel-caption">
            <h5>Filling every occasion with great food and service.</h5>
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>

    <script src="jsplugins/js/jquery.min.js"></script>
    <script src="jsplugins/js/bootstrap.bundle.min.js"></script>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

  </body>

</html>

1
谢谢你，@Yudiz_Webdesign，你帮我节省了时间和精力。 - willy
1
将所有图像的高度设定为相同的高度。
height:100%;

你可以使用CSS的Filter属性来调整图像亮度，而不是使用叠加层。

filter: brightness(0.5);

输出结果与覆盖层相同。
您可以在轮播图像上使用覆盖层来添加文本。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接