使视差元素完全不透明 [英] Make parallaxed element completely opaque

问题描述

我有以下HTML结构：

 < section class =mysection> 
< div class =parallax> 
< div> 
< svg>< / svg> 
< / div> 
< / div> 
< / section> 
 
< section class =back> 
< div class =triangle> 
< img src =img / red-triangle-bkgrd.png> 
< / div> 
< / section> 
  

这是CSS中的LESS：

  .parallax {
 width：90％; 
 margin-left：auto; 
 margin-right：auto; 
} 
 
 section.back {
 .triangle {
 position：relative; 
 img {
 position：absolute; 
 right：0; 
 top：0; 
 
 
 
  

在使用 parallax ， back 恰好位于 mysection 。

当我将 parallax 缩放1.11111111时，视差使用视口的100％宽度。但是， back 不再位于 parallax 之下。相反，它与视差区域重叠。以下是真实情况的图片：

如何让重叠区域中的返回不可见？换句话说，我怎样才能使svg或其容器完全不透明，而不显示它下面的重叠图像？

我在svg及其容器上尝试了'opacity：1` ，但它不起作用。

为了更加详细，我使用了一个名为ScrollMagic的工具来完成这项工作。

解决方案

您可以使用 z-index 来设置堆叠顺序。尝试设置以下内容：

  .mysection {
 position：relative; 
 z-index：1; 
} 
  

这应该确保你的 .mysection （例如svg / map）将传递给任何交叉点（假设您不会将更大的z-index应用于其他元素）。

I have the following HTML structure:

<section class="mysection">
  <div class="parallax">
    <div>
       <svg></svg>
    </div>
  </div>
</section>

<section class="back">
    <div class="triangle">
        <img src="img/red-triangle-bkgrd.png">
    </div>      
</section>

This is the CSS in LESS:

    .parallax{
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

  section.back {
    .triangle {
        position: relative;
        img {
            position: absolute;
            right:0;
            top: 0;     
        }
    }
  }

Before using parallax on the parallax, back just sits immediately below the bottom border of mysection.

When I scale parallax by 1.11111111, the parallax uses 100% width of the viewport. However, back does not sits right beneath the parallax anymore. Instead, it overlaps with the parallax area. Here is a picture of a real-life situation:

How can I make back in the overlap area invisible? Put it another way, how can I make svg or its containers completely opaque without showing the overlaped image beneath it?

I tried 'opacity:1` on svg and its containers, but it is not working.

To be more detailed, I use a tool called ScrollMagic for this work if this is relevant.

解决方案

You can set the stacking order using z-index. Try setting the following:

.mysection {
  position: relative;
  z-index: 1;
}

This should ensure that whatever's in your .mysection (such as the svg/map) passes over whatever intersects (assuming you don't apply a greater z-index to the other elements).

这篇关于使视差元素完全不透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！