Question

我正在制作一个布局，该布局具有两个位置完全相同的绝对位置元素。一个必须被容器切断，而另一个元素将在该容器的外部可见。 overflow: hidden无法正常工作，因为容器必须为position:static，以便两个绝对元素都相对于同一父元素放置。因此，我使用了clip-path: inset(0 0 0 0)，它对于我关注的所有浏览器都可以正常工作，除了Edge（前置铬）。我隐藏了IE的效果。

对于同样适用于Edge的解决方案的任何建议，将不胜感激。

body{
  padding: 100px;
  position: relative;
  margin: 0;
}
.container{
  position: static;
  max-width: 1280px;
  padding: 100px;
  background: lightblue;
/*   height: 500px; */
  clip-path: inset(0 0 0 0);
}
.swoop{
  position: absolute;
  top: 0;
  right: 0;
}
.col{
  width: 40%;
}

<body>
  <img class="swoop swoop-90-y" src="https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/covid/swoop-90deg-yellow.svg" alt="Yellow swooping stripe" srcset="">
  <div class="container">
    <img class="swoop swoop-90-y pos-abs " src="https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/covid/swoop-90deg-white.svg" alt="Yellow swooping stripe" srcset="">
      <div class="col">
        <h1>Hello world</h1>
        <p>Fusce pellentesque, leo vel posuere volutpat, erat ligula cursus metus, sed blandit dui ligula eu erat. Mauris aliquam nec sem in tincidunt. Quisque ultrices quam eget eros elementum, nec venenatis mauris varius. Sed blandit rhoncus augue id vehicula. Nulla sapien nulla, maximus in ornare et, condimentum a turpis. In vel tristique ligula. Morbi id massa quis nisi imperdiet semper. Nam convallis ut risus id tristique. Praesent tempus aliquam magna a consequat.</p>
        </div>
  </div>

Answer 1

以不同的方式来依靠使用background-attachment:fixed的窍门

body {
  padding: 100px;
  position: relative;
  margin: 0;
  background: 
   url(https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/covid/swoop-90deg-yellow.svg) 
   top right fixed no-repeat;
}

.container {
  max-width: 1280px;
  padding: 100px;
  background: 
   url(https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/covid/swoop-90deg-white.svg) 
   top right fixed no-repeat, 
   lightblue;
}

.col {
  width: 40%;
}

<div class="container">
    <div class="col">
      <h1>Hello world</h1>
      <p>Fusce pellentesque, leo vel posuere volutpat, erat ligula cursus metus, sed blandit dui ligula eu erat. Mauris aliquam nec sem in tincidunt. Quisque ultrices quam eget eros elementum, nec venenatis mauris varius. Sed blandit rhoncus augue id vehicula.
        Nulla sapien nulla, maximus in ornare et, condimentum a turpis. In vel tristique ligula. Morbi id massa quis nisi imperdiet semper. Nam convallis ut risus id tristique. Praesent tempus aliquam magna a consequat.</p>
    </div>
  </div>

就像下面一样，您必须调整孩子的background-position以匹配父母中的孩子

body {
  position: relative;
  margin: 0;
}

.container {
  max-width: 1280px;
  padding:80px;
  background: 
   url(https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/covid/swoop-90deg-yellow.svg) 
   calc(50% + 200px) 0 no-repeat;
}

.col {
  padding: 100px;
  width:50%;
  margin:auto;
  background: 
   url(https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/covid/swoop-90deg-white.svg) 
   calc(50% + 200px) -80px no-repeat, 
   lightblue;
}

<div class="container">
    <div class="col">
      <h1>Hello world</h1>
      <p>Fusce pellentesque, leo vel posuere volutpat, erat ligula cursus metus, sed blandit dui ligula eu erat. Mauris aliquam nec sem in tincidunt. Quisque ultrices quam eget eros elementum, nec venenatis mauris varius. Sed blandit rhoncus augue id vehicula.
        Nulla sapien nulla, maximus in ornare et, condimentum a turpis. In vel tristique ligula. Morbi id massa quis nisi imperdiet semper. Nam convallis ut risus id tristique. Praesent tempus aliquam magna a consequat.</p>
    </div>
  </div>
  
  <div class="container">
    <div class="col">
      <h1>Hello world</h1>
      <p>Fusce pellentesque, leo vel posuere volutpat, erat ligula cursus metus, sed blandit dui ligula eu erat. Mauris aliquam nec sem in tincidunt. Quisque ultrices quam eget eros elementum, nec venenatis mauris varius. Sed blandit rhoncus augue id vehicula.
        Nulla sapien nulla, maximus in ornare et, condimentum a turpis. In vel tristique ligula. Morbi id massa quis nisi imperdiet semper. Nam convallis ut risus id tristique. Praesent tempus aliquam magna a consequat.</p>
    </div>
  </div>

隐藏静态元素的溢出（带边的剪切路径问题）

1 个答案: