为什么不使用不透明度？
可以这样说：

#message-box {opacity: 0.5;}

如果你真的想禁用它（也就是说，不允许任何点击事件），你可以使用pointer-events: none;。2016年的浏览器支持非常好。

更新日期：2017年2月1日

这个答案仍然引起了一些关注，所以我决定提供一个更好、视觉上更吸引人的示例（我建议以全屏方式打开示例）。
在下面的示例中，我添加了我之前的方法：使用opacity创建一个"灰色"的外观。然而，通过使用filter属性，你可以 * 实际上 * 使其变灰。如果你不需要IE支持，支持是很好的。通过使用像grayscale和blur这样的值，甚至通过将这些值与opacity属性组合，可以达到视觉上吸引人的"灰色"效果。
注意，我没有在本例中添加pointer-events: none，但它对您的特定情况仍然有用!
x一个一个一个一个x一个一个二个一个x一个一个三个一个

更新日期：2018年2月7日

由于持续的关注，我直观地更新了上面的片段，并添加了一些选项。

在#message-box的顶部创建另一个div，不透明度为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>

也许你可以这样写：

#message-box > * {
   background-color: grey;
}

与其他解决方案不同，这提供了你所需要的（禁用项目）。
你用jQuery吗？如果你用的话很简单，你需要调用$('#messages-box').children().attr("disabled", "disabled");，这样就可以禁用输入。
这是指向我用来测试此功能的代码的链接。http://jsfiddle.net/Vu4Dw/
然后你可以只使用其他用户的“灰色css的东西”来获得效果。
希望这个能帮上忙。

这些都是很好的答案。有些比其他的更复杂。我喜欢改变不透明度，这样你就不会失去样式。我只是想我会添加一个提醒，使用按钮上的disabled属性用于屏幕阅读器。你也可以使用javascript操作它，如下所示：

document.getElementById('IdName').disabled = true;

有很多选项你可以做不透明，也许一个过渡，但我只会使用css代码：游标：不允许;

你也可以切换一个类，让CSS' :before来处理它：

#messagebox{
    position: relative;
}
#messagebox.inactive:before{
    display: block;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

您可以添加一个额外的类（例如lockable），这将允许您重用它，而不是使用硬编码的ID。

在框中添加一个类，并基于该类创建任何“灰显”样式。这样，您只需在一个位置切换一个类即可进行所有更改。