如何在CSS中灰显方框
如何在CSS中灰显方框
提问于 2012-03-24 01:13:35
我有一个元素#messages-box，其中包括标题、正文、发送者、头像和摘录。现在，我想灰显#message-box中的所有元素。
我知道我可以设置每个元素的属性，使它们全部变为灰色。但是有没有办法让我只改变#message-box的属性呢？
我所需要的就是一个灰色的面纱盖住#留言箱。
谢谢。
回答 6
Stack Overflow用户
回答已采纳
发布于 2012-03-24 01:15:11
创建另一个div，它位于#message-box之上，不透明度为50%，背景颜色为灰色。当您需要时，只需显示此覆盖div。演示即将发布。
这是一个很好的demo，可以向您展示我正在谈论的内容。这种方法还有一个好处(如果你试图“禁用”消息div)，那就是防止任何点击到达它下面的div，从而有效地禁用下面的div。
$(document).ready(function() {
$("#myDiv").click(function() {
$("#overlay").show();
});
});#myDiv {
width: 100px;
height: 100px;
background-color: yellow;
margin: 50px 50px;
padding: 10px;
}
#overlay {
display: none;
position: absolute;
width: 100px;
height: 100px;
background-color: gray;
top: 50px;
left: 50px;
padding: 10px;
opacity: .8;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
<p>Some text</p>
<input type="button" value="A button" />
</div>
<div id="overlay"></div>
Stack Overflow用户
发布于 2012-03-24 01:16:32
也许你可以这样写：
#message-box > * {
background-color: grey;
}Stack Overflow用户
发布于 2012-03-24 01:20:01
与其他解决方案不同的是，此解决方案提供了您需要的内容(禁用这些项目)。
你使用jQuery吗？如果你这样做了，那就很容易了。您将必须调用$('#messages-box').children().attr("disabled", "disabled");，这将允许禁用输入。
这是我用来测试它的代码的链接。http://jsfiddle.net/Vu4Dw/
然后你可以使用其他用户的“灰色css的东西”来获得效果..
希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9843556
复制相关文章
相似问题
腾讯云开发者
