html - 用css控制overlay的大小

标签 html css bootstrap-4

这是简单的 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>
                                  
                                  
                                  

最佳答案

使所有图像的高度与

height:100%;
除了覆盖降低图像亮度,您还可以对图像使用 Filter CSS 属性
filter: brightness(0.5);
输出将与覆盖相同
您可以对轮播图像上的文本使用叠加层

关于html - 用css控制overlay的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65750815/

相关文章:

javascript - 没有PHP的表单提交

css - 固定的 div 超出包装

html - 宽度为 :100% are different 的 div

bootstrap-4 - Yii2 - 将 Bootstrap 3 升级到 4

twitter-bootstrap - Bootstrap 垂直对齐属性不起作用

php - IE 主页上的生长字母

jquery - 使用 jQuery slideToggle 调用的 CSS 类管理

javascript - 使用下拉框更改运算符来操作输入框

c# - 图片在 Chrome 上工作正常,但在 IE 上不行

html - CSS:在小屏幕上全宽的 div 不起作用