Question

我想创建一个只包含文字的“标题栏”。

滚动时，下面div中的内容应该会在此“标题栏div”下面消失。我在另一个z-index级别的单独div中有一个动态背景图像。

无论如何有可能使整个“标题栏”对于背景透明，但不是为了它下面的div？

或者，我可以以某种方式将相同的背景设置为标题栏，从而使其不透明（请注意背景图像是否响应）？

请参阅here，了解它现在所做的事情。

CSS：

.top_menu { position:fixed; height:100px; margin-left:5%; width:95%; z-index:2; }
.content { position:relative; left:180px; top:100px; z-index:2; }
#background_image { position:fixed; top:0; left:0; bottom:0; right:0; background:#D3AA69 url("/img/background.gif") repeat-x; background-size:auto 100%; }

HTML

<body>
<div class="top_menu"></div> <!--(the DIV I want to stay on top)-->
<div class="content"></div> <!--(the DIV I want to hide when scrolling)-->
<div id="background_image"></div>

Answer 1

遗憾的是，我不认为CSS是可能的但是，使用简单的JavaScript，可以很容易地设置内容DIV的高度：

function setContentHeight() {
var ContentHeight = $(window).height();     
ContentHeight = ContentHeight - 100 ;
ContentHeight = ContentHeight + "px" ;
document.getElementById("ContentDIV").style.height = ContentHeight ; }

隐藏透明div后面的div，并为整个页面提供响应式背景图像

1 个答案: