时间戳

首页 > 解决方案 > 如何使红色覆盖层仅覆盖图像而不是向右溢出，如图所示

html - 如何使红色覆盖层仅覆盖图像而不是向右溢出，如图所示

问题描述

正如您在右侧校园图片的图像中看到的那样，红色溢出的不仅仅是图像

这是我的 HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HZ University</title>
    <!--Bootstrap CSS-->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
     <!--Custom Css-->
     <link rel="stylesheet" href="hzuni.css">

     <!--Fonts-->
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;1,100;1,200;1,400;1,600;1,700&display=swap" rel="stylesheet">

</head>

<body>
    <!--Navigation + Logo + Background-->
    <section class="header">
        <div class="navContainer">
    <nav>
        <a href="hzuni.html"><img src="imgs/logo.png"></a>
        <img id="menuIcon" class="menuIcon img-fluid" src="imgs/menu.png" onclick="showMenu()" >
        <div class="nav-links" id="nav-links">
            <ul>
                <i class="fa fa-times" onclick="hideMenu()"></i>
                <li><a href="hzuni.html">HOME</a></li>
                <li><a href="">ABOUT</a></li>
                <li><a href="">COURSE</a></li>
                <li><a href="">BLOG</a></li>
                <li><a href="">CONTACT</a></li>
            </ul>
        </div>
        </div>
        
    </nav>
    
    <div class="headerText">
        <h2>Voted The World's Biggest And Best University</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis aliquam harum facere optio iure magni tenetur explicabo ratione<br> sed eligendi temporibus quidem dignissimos placeat deleniti ab, perspiciatis consequatur nisi animi.</p>
        <button class="btn btn-primary">Visit Us To Learn More</button>
    </div>
    </section>
    <!--End of Nav-->

    <section class="course">
        <h1>Courses We Offer</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        
        <div class="container-fluid justify-content-lg-between">
            <div class="row">
                <div class=" col-md-5 col-lg-3 col-sm-12 columns ">
                    <h2>Intermediate</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore incidunt saepe corporis recusandae cupiditate possimus eum a velit pariatur minima reiciendis, esse aliquid qui, assumenda nisi ipsam rerum eligendi delectus?
                    Ea officiis suscipit earum numquam expedita atque at magnam veniam. Quos doloribus asperiores nostrum tenetur, hic nisi accusantium fuga commodi consequuntur exercitationem non nulla maxime laudantium at laboriosam quae officiis?</p>
                </div>

                <div class="col-4 col-md-5 col-lg-3 col-sm-12 columns">
                    <h2>Degree</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore incidunt saepe corporis recusandae cupiditate possimus eum a velit pariatur minima reiciendis, esse aliquid qui, assumenda nisi ipsam rerum eligendi delectus?
                    Ea officiis suscipit earum numquam expedita atque at magnam veniam. Quos doloribus asperiores nostrum tenetur, hic nisi accusantium fuga commodi consequuntur exercitationem non nulla maxime laudantium at laboriosam quae officiis?</p>
                </div>

                <div class="col-4 col-md-12 col-lg-3 mt-md-5 mt-lg-0 col-sm-12 columns">
                    <h2>Post-Graduate</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore incidunt saepe corporis recusandae cupiditate possimus eum a velit pariatur minima reiciendis, esse aliquid qui, assumenda nisi ipsam rerum eligendi delectus?
                    Ea officiis suscipit earum numquam expedita atque at magnam veniam. Quos doloribus asperiores nostrum tenetur, hic nisi accusantium fuga commodi consequuntur exercitationem non nulla maxime laudantium at laboriosam quae officiis?</p>
                </div>

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

    <!--CAMPUS-->
    <section class="campus">
        <h1>Our Global Campus</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

        <div class="container-fluid">
          <div class="row mt-5">
              <div class="col-5 img1">
                  <img src="imgs/CampusA.jpg" class="img-fluid  max-width: 100% " id="campusA">
                  <div class="layer">
                      <h3>BOSTON</h3>
                  </div>
              </div>

              <div class="col-5 img2">
                <img src="imgs/CampusC.jpg" class="img-fluid" id="campusC">
                <div class="layer">
                    <h3>BOSTON</h3>
                </div>
            </div>
          </div>  
        </div>

    </section>

    <!--JavaScript Custom-->
    <!--Toogle Menu-->
    <script>
        function showMenu(){
            document.getElementById("nav-links").style.display = "inline-block"}
    </script>
    <script>
        function hideMenu(){
            document.getElementById("nav-links").style.display = "none"}
    </script>
</body>

</html>

这是校园部分的 CSS

.campus{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 50px;
}

#campusA{
    height: 300px;
    border-radius: 2%;
    position: relative;
}

#campusC{
    height: 300px;
    border-radius: 2%;
}

.layer{
    background: rgba(226, 0, 0, 0.7);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    border-radius: 2%;
}


.img1{
    flex-basis: 32%;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.img1 img{
    width: 100%;
}

.img2{
    flex-basis: 32%;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;  
}

.img2 img{
    width: 100%;
}

我已经尝试了一切，但我找不到问题，当我将 .layer 的宽度更改为 80% 时，它会影响响应能力，知道如何解决这个问题吗？

标签： htmlcssbootstrap-4

解决方案

有一个填充，您可以通过 class 重置p-0。

你也可以使用这个类justify-content-X来对齐你的盒子，下面的例子使用justify-content-around.

function hideMenu() {
  document.getElementById("nav-links").style.display = "none"
}

function showMenu() {
  document.getElementById("nav-links").style.display = "inline-block"
}
.campus {
  width: 80%;
  margin: auto;
  text-align: center;
  padding-top: 50px;
}

#campusA {
  height: 300px;
  border-radius: 2%;
  position: relative;
}

#campusC {
  height: 300px;
  border-radius: 2%;
}

.layer {
  background: rgba(226, 0, 0, 0.7);
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  border-radius: 2%;
}

.img1 {
  flex-basis: 32%;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}

.img1 img {
  width: 100%;
}

.img2 {
  flex-basis: 32%;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}

.img2 img {
  width: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HZ University</title>
  <!--Bootstrap CSS-->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <!--Custom Css-->
  <link rel="stylesheet" href="hzuni.css">

  <!--Fonts-->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;1,100;1,200;1,400;1,600;1,700&display=swap" rel="stylesheet">

</head>

<body>


  <!--CAMPUS-->
  <section class="campus">
    <h1>Our Global Campus</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

    <div class="container-fluid">
      <div class="row mt-5 justify-content-around"><!-- horizontal aligment reset -->
        <div class="col-5 img1 p-0"><!-- padding-reset -->
          <img src="imgs/CampusA.jpg" class="img-fluid  max-width: 100% " id="campusA">
          <div class="layer">
            <h3>BOSTON</h3>
          </div>
        </div>

        <div class="col-5 img2 ml-5 p-0"><!-- padding-reset -->
          <img src="imgs/CampusC.jpg" class="img-fluid" id="campusC">
          <div class="layer">
            <h3>BOSTON</h3>
          </div>
        </div>
      </div>
    </div>

  </section>

</body>

</html>

推荐阅读