个人中心
gpt4 book ai didi

html - 用css控制overlay的大小

转载 作者：行者123 更新时间：2023-12-03 16:58:07 24 4
gpt4 key购买 nike

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

24 4 0
文章推荐： reactjs - 导入 axios 后的 Webpack 5 - "Unexpected token: punc (.)"
文章推荐： chapel - 多区域教堂 : make check fails (GASNet: Invalid number of nodes: -nl)
文章推荐： node.js - 不变违规 : TurboModuleRegistry. getEnforcing(...): 'NativeReanimated' 找不到
文章推荐： javascript - 如何在类组件中定位 Prop
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com