文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使红色覆盖层仅覆盖图像而不像图像中所示向右溢出

问如何使红色覆盖层仅覆盖图像而不像图像中所示向右溢出
EN

Stack Overflow用户

提问于 2021-06-16 02:29:59

回答 1查看 27关注 0票数 0

As You can see in the image on the pictures of the campus on the right side the red spills to cover more than just the image

这是我的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%时，它会影响响应性，你知道如何解决这个问题吗？

bootstrap-4

html

css

回答 1

Stack Overflow用户

发布于 2021-06-16 03:54:24

有一个填充可以通过类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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67991691

复制

相似问题

问如何使红色覆盖层仅覆盖图像而不像图像中所示向右溢出
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使红色覆盖层仅覆盖图像而不像图像中所示向右溢出EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使红色覆盖层仅覆盖图像而不像图像中所示向右溢出
EN