0

我有一些类似于以下的代码：

HTML

<div id="darkOverlay"></div>
<div id="content">
    <div id="whiteText">I need to be clear bright white!</div>
</div>

当我单击一个按钮时，我为 div 赋予以下属性：

$('#darkOverlay').css('background-color','rgba(50,50,50,0.5)');
$('#darkOverlay').css('z-index','100');
$('#whiteText').css('display','block');
$('#whiteText').css('z-index','500');

所以基本上我将darkOverlay 设置为暗半透明并将其放在前面。然后我还显示白色文本并将其带到（甚至更多）前面。

但是，darkOverlay 似乎仍然在我的白色文本之上投射其半透明。这会导致白色文本不像我需要的那样显示为白色。我应该怎么做才能确保我的白色文字脱颖而出？

CSS [页面加载]

#darkOverlay {
    position: absolute;
    top: 0px;
    height:100%;
    width:100%;
    z-index:-100;
}

#whiteText {
    display: none;
    position: absolute;
}
4

1 回答 1

0

如果是白色文本有问题，那是因为没有任何东西将颜色设置为白色。

 $('#whiteText').css('color','white');

或完整示例：

<!DOCTYPE HTML>
<html>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=1.4.4'></script>
<style>
#darkOverlay {
    position: absolute;
    top: 0px;
    height:100%;
    width:100%;
    z-index:-100;
}

#whiteText {
    display: none;
    position: absolute;
}
</style>
<body>

<div id="darkOverlay"></div>
<div id="content">
    <div id="whiteText">I need to be clear bright white!</div>
</div>

<div style="position: relative">
   <button id="clickme">clickme</button>
</div>
</body>
<script>
$("#clickme").click(function(e) {
$('#darkOverlay').css('background-color','rgba(50,50,50,0.5)');
$('#darkOverlay').css('z-index','100');
$('#whiteText').css('color','white');
$('#whiteText').css('display','block');
$('#whiteText').css('z-index','500');
});
</script>
</html>
于 2013-09-22T23:51:25.370 回答