时间戳

首页 > 解决方案 > 当两个图像相互重叠时，如何允许一个图像溢出容器并隐藏另一个图像？

html - 当两个图像相互重叠时，如何允许一个图像溢出容器并隐藏另一个图像？

问题描述

body{
    background-color:hsl(240, 73%, 65%);
    font-size: 12px;
    font-family: 'Kumbh Sans', sans-serif;
}
img{
    width: 90%;
}
h3{
    font-weight: 700;
}
p{
    font-weight: 400;
    font-size: smaller;
    display: none;
    margin-top: 2%;
    padding-right: 5px;
}
hr{
    color: hsl(240, 5%, 91%);
}
.container{
    width: 800px; 
    height: 400px;
    margin-top: 100px;
    background-color: white;
    background-image: url("images/bg-pattern-desktop.svg");
}
.images{
overflow:hidden;
}
.lady{
    position: absolute;
    top: 65px;
    left: -50px;
    object-fit: cover;
}

.box{
    width: 37%;
    position: absolute;
    top: 190px;
    left: -70px;
    z-index: 1;
}
.wrapper{
    padding: 5%;
}
.img-fluid{
    width: 2.5%;
    position: absolute;
    right: 50px;
}

.que:hover{
    cursor: pointer;
    color: hsl(14, 88%, 65%);
}

.font-toggle{
    font-weight: 700;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <!-- Bootstrap link -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <!-- Google fonts -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap" rel="stylesheet">  
  <!-- Custom CSS -->
  <link rel="stylesheet" href="styles.css">
  <title>Frontend Mentor | FAQ Accordion Card</title>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-6 images">
        <img class="lady" src="images/illustration-woman-online-desktop.svg" alt="">
        <img class="box" src="images/illustration-box-desktop.svg" alt="">
      </div>
      <div class="col-6 wrapper">
        <h3>FAQ</h3>
        <div class="question">
          <div class="que"> How many team members can I invite?</div>
          <img class="img-fluid" src="images/icon-arrow-down.svg" alt="">
        <p>You can invite up to 2 additional users on the Free plan. There is no limit on 
          team members for the Premium plan.</p>
        </div>
        <hr>
        <div class="question">
         <div class="que">What is the maximum file upload size?</div> 
          <img class="img-fluid" src="images/icon-arrow-down.svg" alt="">
        <p>No more than 2GB. All files in your account must fit your allotted storage space.</p>
        </div>
        <hr>
        <div class="question">
          <div class="que">How do I reset my password?</div> 
          <img class="img-fluid" src="images/icon-arrow-down.svg" alt="">
          <p>Click “Forgot password” from the login page or “Change password” from your profile page.A reset link will be emailed to you.</p>
        </div>
        <hr>
        <div class="question">
          <div class="que">Can I cancel my subscription?</div> 
          <img class="img-fluid" src="images/icon-arrow-down.svg" alt="">
          <p>  Yes! Send us a message and we’ll process your request no questions asked.</p>
        </div>
        <hr>
        <div class="question">
          <div class="que">Do you provide additional support?</div> 
          <img class="img-fluid" src="images/icon-arrow-down.svg" alt="">
          <p>  Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
        </div>
        <hr>
      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
  <script src="index.js"></script>
  <div class="attribution">
  </div>
</body>
</html>

所需设计的预览图像

我已经应用了溢出：隐藏属性，但它正在裁剪两个图像。我希望裁剪女士（带笔记本电脑）图像（从容器中溢出）并显示盒子图像，就像它在图像中一样。

请参阅预览图像以供参考。

我被困住了。请帮帮我。我刚开始学习。

谢谢！

标签： htmlcssbootstrap-4

解决方案

您需要将lady图像包装到另一个 div 中并将溢出设置为隐藏在那里。然后定位lady使用边距而不是topor left。看这里：

body{
    background-color:hsl(240, 73%, 65%);
    font-size: 12px;
    font-family: 'Kumbh Sans', sans-serif;
}
img{
    width: 90%;
}
h3{
    font-weight: 700;
}
p{
    font-weight: 400;
    font-size: smaller;
    display: none;
    margin-top: 2%;
    padding-right: 5px;
}
hr{
    color: hsl(240, 5%, 91%);
}
.container{
    width: 800px; 
    height: 400px;
    margin-top: 100px;
    background-color: white;
    background-image: url("images/bg-pattern-desktop.svg");
}



.box{
    width: 37%;
    position: absolute;
    top: 190px;
    left: -70px;
    z-index: 1;
}
.wrapper{
    padding: 5%;
}
.img-fluid{
    width: 2.5%;
    position: absolute;
    right: 50px;
}

.que:hover{
    cursor: pointer;
    color: hsl(14, 88%, 65%);
}

.font-toggle{
    font-weight: 700;
}

.ladywrap{
    overflow: hidden;
}

.lady{
    margin-left: -50px;
    margin-top: 65px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <!-- Bootstrap link -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <!-- Google fonts -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap" rel="stylesheet">  
  <!-- Custom CSS -->
  <link rel="stylesheet" href="styles.css">
  <title>Frontend Mentor | FAQ Accordion Card</title>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-6 images">
      <div class="ladywrap">
        <img class="lady" src="https://frontendmentor-faq-accordion-card.vercel.app/img/illustration-woman-online-desktop.44e30650.svg" alt="">     
      </div>
        <img class="box" src="https://frontendmentor-faq-accordion-card.vercel.app/img/illustration-box-desktop.a7ef46ea.svg" alt="">
      </div>
      <div class="col-6 wrapper">
        <h3>FAQ</h3>
        <div class="question">
          <div class="que"> How many team members can I invite?</div>
          <img class="img-fluid" src="images/icon-arrow-down.svg" alt="">
        <p>You can invite up to 2 additional users on the Free plan. There is no limit on 
          team members for the Premium plan.</p>
        </div>
        <hr>
        <div class="question">
         <div class="que">What is the maximum file upload size?</div> 
          <img class="img-fluid" src="images/icon-arrow-down.svg" alt="">
        <p>No more than 2GB. All files in your account must fit your allotted storage space.</p>
        </div>
        <hr>
        <div class="question">
          <div class="que">How do I reset my password?</div> 
          <img class="img-fluid" src="images/icon-arrow-down.svg" alt="">
          <p>Click “Forgot password” from the login page or “Change password” from your profile page.A reset link will be emailed to you.</p>
        </div>
        <hr>
        <div class="question">
          <div class="que">Can I cancel my subscription?</div> 
          <img class="img-fluid" src="images/icon-arrow-down.svg" alt="">
          <p>  Yes! Send us a message and we’ll process your request no questions asked.</p>
        </div>
        <hr>
        <div class="question">
          <div class="que">Do you provide additional support?</div> 
          <img class="img-fluid" src="images/icon-arrow-down.svg" alt="">
          <p>  Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
        </div>
        <hr>
      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
  <script src="index.js"></script>
  <div class="attribution">
  </div>
</body>
</html>

推荐阅读