如何在带有倾斜伪元素的div上添加背景图像

问题描述

我对编码和 我正在尝试获得与此https://imgur.com/a/sNOct04相同的结果在我的代码上，我有一个容器，其中包含2个倾斜的伪元素以形成所需的形状。
现在，我想添加链接中所示的低不透明度的背景图像。
我无法成功将1张图像放入div和伪元素中，也不会从伪元素中溢出。 供参考，这是我的代码：

.about-section-2 {
    position: relative;
    margin-top: 8rem;
    margin-bottom: 5rem;
    padding-bottom: 15rem;
    background-image: url('https://via.placeholder.com/2500/0000FF/808080');
}

.about-section-2::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color:#003748;
    transform-origin: top left;
    transform: skewY(-4.5deg);
    z-index: -10;
}

.about-section-2::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color:#003748;
    transform-origin: top right;
    transform: skewY(-4.5deg);
    z-index: -10;
}

<div class="container-fluid about-section-2">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12">
        <div class="title-text pt-5 text-center about-title-2">
          <h1>Some Text</h1>
        </div>
      </div>
    </div>
  </div>
</div>

您的见解是什么？ 谢谢您的时间！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）