HTML – 如果可能的话,如何使用背后的元素制作透明背景？

2019年7月20日 231次阅读

我有兴趣创建一个网站(目前正在学习),我已经看到了一些有趣的效果,你滚动页面的内容,但一些元素保持静态.

滚动网页的效果,一部分具有透明背景,您可以看到它背后的所有内容.

当您滚动到http://www.noip.com/的最底部时,您可以看到这样的效果.

是否可以只使用HTML和CSS？我假设我必须将适当的材质背景设置为透明(我不知道),并在其后面设置一些静态元素.

说到我的测试网站,这里的想法让您可以更轻松地理解.
看起来像这样;

http://i.imgur.com/t43t9HW.jpg

而且我认为将全尺寸风景图片设置为所有元素背后的静态背景,并将该线条的背景设置为透明可以做到这一点,是吗？

任何建议表示赞赏.

最佳答案 实际上,这并不是以透明的方式设置背景,以这种方式显示部分称为
Parallax scrolling Effect,它基本上以不同的速度滚动分层的部分或元素,或者在滚动以模拟3D时显示其他元素之下或之上的元素,这种模拟有时称为2.5D.

这个JS Fiddle–updated显示了一个模仿你问题中的示例页面的简单方法：

html, body{margin: 0;padding: 0;}
#wrapper{position:relative;}

#container {
  z-index: 1;
  margin-bottom: 70vh;
  position: relative;
  top: 0;
  left: 0;
}

.sections, .sections2 {
  width: 100%;
  min-height: 100vh;
  font-size: 20px;
  color: #EEE;
  line-height: 10vh;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}

.sections2 {
  padding-top:35vh;
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
}

.sections h2, .sections2 h2 {
  color: white;padding: 0;text-align: center;margin: 0;
}

#one {background-color: green}
#two {background-color: orange}
#three {background-color: tomato;}
#five {background-color: navy}
<div id="wrapper">
  <div id="five" class="sections2">
    <h2>Section Five</h2> Chupa chups liquorice lollipop lemon drops fruitcake cake wafer. Croissant tiramisu chocolate muffin ice cream macaroon apple pie. Jelly-o toffee tootsie roll. Marzipan cheesecake powder toffee muffin. Caramels bonbon macaroon sesame snaps jelly icing.
  </div>
  <div id="container">
    <div id="one" class="sections">
      <h2>Section ONE</h2>
    </div>
    <div id="two" class="sections">
      <h2>Section TWO</h2>
    </div>
    <div id="three" class="sections">
      <h2>Section THREE</h2>
      <br>
      <br>Flavour, robusta so froth cortado foam cup acerbic, robust macchiato, single origin aged, macchiato ristretto coffee so coffee frappuccino ut strong, iced, frappuccino so et dark flavour. Frappuccino seasonal, roast latte, redeye, robusta eu caramelization
      espresso, cup, siphon strong fair trade, cinnamon body galão qui latte lungo mazagran sweet. Redeye, a cortado dark filter half and half, frappuccino a, crema ristretto decaffeinated, black milk decaffeinated viennese single origin seasonal kopi-luwak
      organic. Coffee qui shop chicory at cortado, as white beans, roast rich, filter ristretto, so mazagran trifecta black grounds black, turkish spoon barista organic aged.
      <br>Dripper, coffee whipped milk trifecta grounds, coffee whipped extra, organic, irish instant, roast, black ut strong irish and medium. Foam coffee percolator con panna macchiato, ristretto, robusta, fair trade wings flavour coffee flavour dripper
      robust americano aromatic, grinder latte, rich aroma shop crema, caramelization latte fair trade arabica ut milk café au lait rich foam caramelization flavour body strong. Pumpkin spice mocha eu as carajillo flavour, caramelization percolator latte
      plunger pot, body foam french press, milk, irish blue mountain cup sugar, robusta milk skinny, fair trade redeye foam galão roast saucer. So, viennese, cultivar shop sweet iced that so fair trade robust, siphon ristretto americano whipped spoon
      cup, at, redeye decaffeinated kopi-luwak plunger pot aromatic medium, single origin kopi-luwak variety wings sweet seasonal crema.</div>
  </div>
</div>

所以诀窍是让div#container后面的海军彩色部分div#five.section2给它一个负值z-index：-1让它落后于其他元素而div#container有正值z-index ：1.

同时给div#容器一个特定的值,即70视口高度单位margin-bottom：70vh,因为没有这个“揭示”就不会发生因为div#container不会给我们空间看下面的div#five它.

视差效应示例：

> http://www.dangersoffracking.com
> http://whiteboard.is
> http://us.rimmellondon.com
> http://poppyspend.britishlegion.org.uk
> http://www.flatvsrealism.com
> http://www.sony.com/be-moved

**请注意,尽管可以使用CSS实现简单的视差效果(主要是关于分层部分的东西),但是高级的需要javascripting尤其是那些听鼠标事件以及滚动的人,你也可以查看这个库ParallaxJS.

点赞