我的页面内容很长。我的菜单标题也是透明的，上面有文字。因此，如果我滚动页面，则整个内容应隐藏在菜单标题的后面。该内容不应通过此标头看到。我的菜单标题应该是透明的。这个怎么做？
//code .navbar-fixed-top{ background-color:yellow; height:60px; text-align:center; font-size:40px; opacity:0.7; } .content{ margin-top:65px; }
您要做的是制作内容容器fixed。固定后，元素本身无法滚动（因为它固定在窗口上）。然后，您可以使用CSStop和bottom属性定义偏移量。
CSS将变成这样：
.content {
/** Absolute offset from the top */
top: 65px;
/** Makes sure the content element itself cannot be scrolled (that way it can't get behind the header) */
position: fixed;
/** Offset from the bottom of the screen */
bottom: 0;
/** Show a scrollbar when there's a lot of content */
overflow: auto;
}
我还更新了您的JSFiddle。
根据您的评论，我可以告诉您，仅使用CSS实际上是不可能的。这样做的原因是您应该将这些DOM节点视为图层。您想要的是图层的一部分变得不可见（文本），而另一部分（背景）不可见，但是您只能说您想要整个设置（背景+文本），或者什么都不要做。
唯一的方法是使用JavaScript。您可以通过更新的background-position属性来模拟滚动行为body。例如，通过执行以下操作：
$(".content").scroll(function() {
$("body").css("background-position", "0 -" + $(this).scrollTop() + "px");
});
这实际上是在.content滚动时，滚动的像素数量也用于移动背景，使它们保持“同步”。
我还更新了您的JSFiddle来演示这一点。
根据您想将滚动条放在整个页面上的注释，让我再说一遍：DOM节点是图层，如果您希望将滚动条放在整个页面上，则文本也在整个页面上。没有其他解决方法（这是常识）。
如果您确实希望整个页面上的滚动条都看不到文本，那么这很简单：删除标题的透明度。如果要在其<div>后面放置一块背景，则必须在标题后面放置一个，然后用JavaScript移动背景位置（仅在标题后面的一块）。该新<div>控件将不具有透明度，并且应位于文本层上方。这意味着标题不会完全透明，因此文本将不可见。
但实际上，您应该考虑是否确实要这样做。仅针对一小部分UI行为，需要进行大量工作和编写代码。我认为将所有JavaScript都放在那不是一个好习惯。我什至认为做您想要的事情不是一个好的UI做法，但是，如果您确实想要它，那么，我只是告诉您如何做，但是在这里它也停止了。我不会为您编写那段代码，您有一个开始的基础，所以现在您可以继续。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句