隐藏 div 之外的图像答案

【问题标题】：hide the images going outside the div隐藏 div 之外的图像
【发布时间】：2021-02-04 19:35:09
【问题描述】：

bgpattern，illustrationwoman 类图像应该隐藏在 div 之外，但图像在卡片 div 之外也可见。对我来说，图像只应显示在 div 内部，而不应显示在外部。 Box 类图像应显示在 div 的内侧和外侧。

CSS 即使我尝试overflow: hidden 用于卡片类，但它隐藏了所有向外的图像，但对我来说，不应隐藏框图像我尝试为 bgpatternimg 添加，illustrationwoman 它不起作用。

card {
  position: absolute;
  background-color: white;
  height: 70vh;
  width: 130vh;
  border-radius: 3%;
  position: relative;
  margin: auto;
  top: 15vh;
}

.bgpatternimg {
  overflow: hidden;
  position: absolute;
  left: -70vh;
  top: -30vh;
  width: 120vh;
}

.illustratewoman {
  overflow: hidden;
  position: absolute;
  bottom: 10vh;
  left: -10vh;
  width: 60vh;
  height: 50vh;
}

.boximg {
  position: absolute;
  width: 22vh;
  bottom: 4vh;
  left: vh;
  overflow: visible;
}

<div class="card">
  <div class="left">
    <div class="bgpattern">
      <img class="bgpatternimg" src="images/bg-pattern-desktop.svg" alt="bgpattern">
    </div>
    <div class="illustratewoman">
      <img class="illuswoman" src="images/illustration-woman-online-desktop.svg" alt="illustratewoman">
    </div>
    <div class="box">
      <img class="boximg" src="images/illustration-box-desktop.svg" alt="">
    </div>
  </div>

【问题讨论】：

我给你做了一个sn-p。请把它改成minimal reproducible example

标签： html css overflow

【解决方案1】：

您正在定位absolute，这意味着它将使该位置相对于最近的静态/相对定位的父母或祖父母。你最好使用另一种没有绝对定位的策略，然后让你的宽度和高度100%

【讨论】：

【解决方案2】：

更改样式文件

你好，你应该把样式改成这段代码

.card{
  position:absolute;
  background-color: white;
  height:70vh;
  width:130vh;
  border-radius: 3%;
  position:relative;
  margin:auto;
  top:15vh;
}
.bgpattern {
    overflow: hidden;
    position: absolute;
    left: -70vh;
    top: -30vh;
    width: 120vh;
}

.illustratewoman {
    width: 60vh;
    position: absolute;
    bottom: 10vh;
    left: -10vh;
    overflow: hidden;
}

.box {
    position: absolute;
    width: 22vh;
    bottom: 4vh;
    left: 28vh;
}

【讨论】：