首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在CSS中灰显方框

如何在CSS中灰显方框
EN

Stack Overflow用户
提问于 2012-03-24 01:13:35
回答 6查看 98.2K关注 0票数 32

我有一个元素#messages-box,其中包括标题、正文、发送者、头像和摘录。现在,我想灰显#message-box中的所有元素。

我知道我可以设置每个元素的属性,使它们全部变为灰色。但是有没有办法让我只改变#message-box的属性呢?

我所需要的就是一个灰色的面纱盖住#留言箱。

谢谢。

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2012-03-24 01:15:11

创建另一个div,它位于#message-box之上,不透明度为50%,背景颜色为灰色。当您需要时,只需显示此覆盖div。演示即将发布。

这是一个很好的demo,可以向您展示我正在谈论的内容。这种方法还有一个好处(如果你试图“禁用”消息div),那就是防止任何点击到达它下面的div,从而有效地禁用下面的div。

代码语言:javascript
复制
$(document).ready(function() {
  $("#myDiv").click(function() {
    $("#overlay").show();
  });
});
代码语言:javascript
复制
#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;
}
代码语言:javascript
复制
<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>

票数 14
EN

Stack Overflow用户

发布于 2012-03-24 01:16:32

也许你可以这样写:

代码语言:javascript
复制
#message-box > * {
   background-color: grey;
}
票数 4
EN

Stack Overflow用户

发布于 2012-03-24 01:20:01

与其他解决方案不同的是,此解决方案提供了您需要的内容(禁用这些项目)。

你使用jQuery吗?如果你这样做了,那就很容易了。您将必须调用$('#messages-box').children().attr("disabled", "disabled");,这将允许禁用输入。

这是我用来测试它的代码的链接。http://jsfiddle.net/Vu4Dw/

然后你可以使用其他用户的“灰色css的东西”来获得效果..

希望这能有所帮助。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9843556

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档