如何制作一个带有元素背景的透明背景？如果可能的话。

Question

我对制作网站有兴趣（正在学习），我看到了一些有趣的效果，当你滚动页面时，某些元素保持静止。 这种效果是当你滚动网页时，其中一部分具有透明背景，你可以看到它后面的所有内容。 当你滚动到 http://www.noip.com/ 的底部时，你可以看到这样的效果。 只使用HTML和CSS是否可能实现？我认为我必须将适当的材料背景设置为透明（我不知道如何设置），并在其后设置一些静态元素。 说到我的测试网站，这就是想法，这样你就可以更容易地理解。

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

我觉得将全尺寸的横向图片设置为所有元素的静态背景，并将该行的背景设置为透明，这样做可以达到效果，不是吗？

欢迎提出任何建议。

- NIKNAIZ

---

不知道你的意思。你的示例页面上哪里显示了透明背景？提供一张截图会更有帮助。 - herrh

你误读了，没关系。我想说的是示例在 http://noip.com/ 的最底部。 - NIKNAIZ

此外，底部的灰色条也在做同样的事情，如果你注意到了就会发现。 - NIKNAIZ

你的意思是滚动后页脚出现并隐藏在其他内容后面吗？ - herrh

当上面的div滚动出去时，OP希望显示一个div。当您向下滚动时，示例页面底部会显示。 - Shawn Mehan

Answer 1

实际上这并不是将背景设置为透明，以此方式展示区域被称为视差滚动效果，基本上滚动层叠区域或元素的速度不同，或在滚动时显示元素在其他元素上方或下方，以模拟3D，这种模拟有时被称为2.5D。

这个JS Fiddle-已更新演示了一种简单的方法来模仿你提问中的示例页面。

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 设置负值的 z-index:-1，使其在其他元素后面，而让 div#container 设置正值的 z-index:1。

此外，给 div#container 设置一个特定的值，即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 实现，但高级的效果需要 JavaScript，特别是监听鼠标事件和滚动事件的效果。您可以查看这个库 ParallaxJS。

- Mi-Creativity

Answer 2

要使一个 div 具有不透明度，请使用 opacity CSS 属性

查看这个 fiddle

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

- Fábio Junqueira

---

不错的小把戏，但这不是 OP 寻求的。如果你将蓝色框放在红色框下面，并将蓝色框放在底部，OP 希望能够通过向下滚动页面并将红色框滑开来显示蓝色框。 - Shawn Mehan

div.relative { position: relative; width: 400px; height: 850px; border: 3px solid #73AD21; z-index:1; background-color:red; opacity: 1; } div.absolute { z-index:0; position: absolute; top: 800px; left: 10; width: 200px; height: 100px; border: 3px solid #73AD21; background-color:blue; } - Shawn Mehan

但我不知道如何使它滚动。 - Shawn Mehan

我认为这回答了OP在这里提出的问题：“是否可能仅使用HTML和CSS来完成？我假设我必须将适当的材料背景设置为透明（我不知道如何设置），并在其后设置一些静态元素。” - Fábio Junqueira

OP正在苦苦寻找解决方案，但要求在这里更清晰地列出。一种效果，当您滚动网页时，其中一部分具有透明背景，您可以看到其后面的所有内容。当您滚动到http://www.noip.com/的底部时，您可以看到这种效果。 - Shawn Mehan

Answer 3

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

感谢所有分享知识的人！

- NIKNAIZ