content ::before 超过两个带有 overflow-x:hidden 的 div

Question

我想这样做：image

我的问题是我需要隐藏 X 轴上的越界，这将是内容 ::before 在两个 div 之上。

据我了解，这是设计中的常见元素，我想知道如何做得更好。

section.another {
  height: 200px;
  background-color: #51D145;
}

section.out-mission {
  position: relative;
  overflow-x: hidden;
  padding-bottom: 50px;

}
section.out-mission::before {
  content: url("https://fakeimg.pl/200x200/");
  position: absolute;
  top: -100px;
  right: -100px;
}
  
p.text {
  line-height: 150%;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <section class="another">
    
  </section>
  <section class="out-mission">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h2 class="section-title">
                    our mission
                </h2>
            </div>
            <div class="col-12">
                <p class="text">
                    НПФ «НОРД» – разработчик уникального направления, на основе регулируемых газовых сред (РГС), в
                    области производства экологически-чистого продукта.
                </p>
                <p class="text">
                    Технология РГС позволяет производить в промышленных масштабах, свободные от болезней и патогенов,
                    качественные и полезные продукты (на этапах выращивания, переработки и хранения):
                </p>
                <p class="text">мясо и птицу без использования антибиотиков и гормонов; овощи и зеленые культуры без
                    применения пестицидов и агрохимикатов.</p>
            </div>
        </div>
    </div>
</section>
</body>
</html>

Answer 1

你能检查一下下面的代码吗link？希望它对你有用。我们在两个部分都添加了一个 div，并在 div.

中添加了 overflow-x: hidden

请参考这个link：https://jsfiddle.net/yudizsolutions/bLhu0qcm/

content ::before 超过两个带有 overflow-x:hidden 的 div

content ::before over two divs with overflow-x:hidden

html

css

overflow