时间戳

首页 > 解决方案 > 使用溢出隐藏后显示在部分后面的图像

html - 使用溢出隐藏后显示在部分后面的图像

问题描述

我在使用after类时得到水平滚动。

如果我使用溢出，那么我的图像将显示在第一部分的后面。

你能帮我解决这些问题吗？

这after是不工作的课程。我得到滚动条

section {
  height: 400px;
  position: relative;
}

.test1 {
  overflow: hidden;
}

.test1:after {
  content: "";
  background-image: url('https://www.netclipart.com/pp/m/16-165891_sale-price-tag-png-sale-icon-png.png');
  background-repeat: no-repeat;
  background-size: contain;
  width: 350px;
  height: 308px;
  display: block;
  position: absolute;
  top: -15%;
  right: -10%;
}
<section style="background-color: #f8f8f8;">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="test1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

</section>

我得到输出

在此处输入图像描述 我的预期输出

在此处输入图像描述

标签： htmlcss

解决方案

问题是img那个relativediv 所以它被切割了，设置right 0和宽度到 img 的实际宽度解决了这个问题

section {
  height: 400px;
  position: relative;
}

.test1 {

}

.test1:after {
  content: "";
  background-image: url('https://www.netclipart.com/pp/m/16-165891_sale-price-tag-png-sale-icon-png.png');
  background-repeat: no-repeat;
  background-size: contain;
      width: 210px;
    height: 308px;
    display: block;
    position: absolute;
    top: -15%;
    right: 0;
 background-position: 47px center
}
<section style="background-color: #f8f8f8;">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="test1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

</section>

推荐阅读