Question

我对制作网站感兴趣（目前正在学习），我在滚动页面内容时看到了一些有趣的效果，但有些元素仍然是静态的。

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

当您滚动到http://www.noip.com/的最底部时，可以看到此效果。

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

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

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

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

任何建议都表示赞赏。

Answer 1

实际上，没有将背景设置为透明的，以这种方式显示的部分称为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#five.section2 在<{1}}后面加上海军色的部分，给它一个负值div#container，让它落后于其他元素虽然z-index:-1的正值为div#container。

同时给z-index:1一个特定的值，即70视口高度单位div#container，因为如果没有这个，“揭示”不会发生，因为margin-bottom:70vh不会给我们空间以查看其下方的div#container。

视差效果示例：

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。

Answer 2

要在div上实现不透明度，请使用/** * Inserts the specified element at the tail of this queue. * As the queue is unbounded, this method will never throw * {@link IllegalStateException} or return {@code false}. * * @return {@code true} (as specified by {@link Collection#add}) * @throws NullPointerException if the specified element is null */ public boolean add(E e) { return offer(e); } css属性

看看这个小提琴

https://jsfiddle.net/cgz8kdsa/1/

Answer 3

我找到了一个解决方案，我将相应段的背景设置为透明，并在所有对象后面设置静态html背景，创建我想要的效果。

感谢所有分享知识的人！

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

3 个答案: