将倾斜的 div 与背景图像堆叠在一起答案

【问题标题】：Stacking skewed divs with background images将倾斜的 div 与背景图像堆叠在一起
【发布时间】：2019-03-07 20:49:39
【问题描述】：

我正在处理倾斜的 div，但对如何处理堆叠/重叠有疑问。

我有 3 个 div； - Div1 具有简单的背景颜色并且没有倾斜 - Div2 顶部倾斜并有背景图像（背景颜色设置为与 Div1 相同） - div3 是具有不同背景图像的 div2 的重复。

问题是，div3 的倾斜部分具有 div1 背景颜色 - 我希望它显示 div2 的背景图像。

这有意义吗？

This is what it looks like right now - i want to get rid of the red and show the image instead.

谢谢！

HTML 和 CSS

/* 8. Sections */
    section {
        width: 100%;
        height: 100vh;
      }
      
      /* Homepage - Hero */
      section.hero {
        position: relative;
        overflow: hidden;
        width: 100%;
        background-color: #E2004B;
      }
      
      /* Homepage - VWEAR */
      section.vwear {
        position: relative;
        overflow: hidden;
        width: 100vw;
        background-image: url("https://drive.google.com/uc?id=1oaThTzD6dpXolbB0OSxDMMTC52VF1A0f");
        background-size: cover;
        background-position: center;
      }
      
      section.vwear:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 100%;
        left: 0;
        transform: skewY(-3deg);
        transform-origin: right;
        background: #E2004B;
      }
      
      /* Homepage - VGEAR */
      section.vgear {
        position: relative;
        overflow: hidden;
        width: 100vw;
        background-image: url("https://drive.google.com/uc?id=1-WIqMPtFY1I6WyDYFnSyhvkYqVNqdR9o");
        background-size: cover;
        background-position: center;
      }
      
      section.vgear:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 100%;
        left: 0;
        transform: skewY(-3deg);
        transform-origin: right;
        background: #E2004B;
      }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="stacking_div_skew.css">
</head>
<body>
    HTML
<!-- start Hero Section-->
    <section class="hero" data-section-name="hero" id="hero">
        <div class="txt-container">
            <div class="hero-txt">BIG HEADLINE TEXT<br><br>SMALLER SUBTITLE</div>
        </div>
    </section>
    <!-- end Hero Section -->

    <!-- start V:WEAR Section-->
    <section class="vwear" data-section-name="vwear" id="vwear">
      <div class="txt-container">
        <div class="hero-txt">BIG HEADLINE TEXT<br><br>SMALLER SUBTITLE</div></div>
      </div>
    </section>
    <!-- end V:WEAR Section -->

    <!-- start V:GEAR Section-->
    <section class="vgear" data-section-name="vgear" id="vgear">
      <div class="txt-container">
        <div class="hero-txt">BIG HEADLINE TEXT<br><br>SMALLER SUBTITLE</div></div>
      </div>
    </section>
</body>
</html>

enter image description here

【问题讨论】：

div2 和 div 3 在 div1 内吗？
否 - div 是按部分堆叠的
在此处分享您的 HTML 和 CSS
添加了html和css
是的，没错，因为我复制了 css 并在 div2 和 div3 中添加了背景图像。

标签： html css

【解决方案1】：

我假设您想要实现以下目标：

section {
  padding: 25px 20px;
}

.red {
  background: red;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

section:nth-child(2) {
margin-top: -10px;
  clip-path: polygon( 0 10px, 100% 0, 100% 100%, 0 100%);
}

section:nth-child(3) {
margin-top: -10px;
  clip-path: polygon( 0 0, 100% 10px, 100% 100%, 0 100%);
}

<section class="red">Top</section>
<section class="green">Middle</section>
<section class="blue">Bottom</section>

我个人会采用这种方法，因为它干净且易于实施。您应用剪辑路径以倾斜顶部边缘，然后使用负边距将该元素拉到它之前的元素之上。您可以为重叠的元素添加额外的填充，以确保内容不被覆盖。

【讨论】：

谢谢詹姆斯。我的印象是剪辑路径不是一个广泛支持的功能，是的，对吧？
带有-webkit- 标志的支持还不错。你真的会错过 IE/Edge。这取决于这对您来说是否是一项重要功能，或者它是否可以逐步增强。