如何在CSS中灰显一个框

Question

我有一个元素＃messages-box，包括标题，正文，发件人，头像和摘录。现在，我想将＃message-box中的所有元素变灰。

我知道我可以设置每个元素的属性以使它们全部变灰。但有没有办法让我可以改变＃message-box的属性？

我需要的只是灰色的面纱覆盖＃message-box。

谢谢。

Answer 1

为什么不使用不透明度？

说出类似的话：

#message-box {opacity: 0.5;}

如果您尝试禁用它（即不允许任何点击事件），您可以使用pointer-events: none;。 2016年的浏览器支持是very good。

---

2017年2月1日更新

这个答案仍然得到了一些关注，所以我决定提供一个更好的，视觉上更具吸引力的例子。 （我建议全屏打开示例。）

在下面的示例中，我添加了我之前的方法：使用opacity创建“灰显”外观。但是，通过使用filter属性，您可以实际将其灰显。 Support is good, if you don't need IE support。通过使用grayscale和blur等值，甚至将这些值与opacity属性相结合，可以达到视觉上吸引人的“灰色”效果。

请注意，我在此示例中未添加pointer-events: none，但它仍可能对您的具体情况有用！

$("button[data-gray-class]").click(function() {
  const $this = $(this);
  const messageBox = $("#message-box");
  const classToAdd = $this.attr("data-gray-class");

  messageBox.removeClass();
  $this.siblings().removeClass("active");

  if (classToAdd != 'none') {
    messageBox.addClass(classToAdd);
    $this.addClass("active");
  }
});

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  width: 100%;
  margin: 0;
}

body {
  background: linear-gradient(45deg, #ce4d41, #ff6f61);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.48;
}

h1,
h2,
h3 {
  font-family: 'Comfortaa', cursive;
  font-weight: 700;
  margin-top: 0;
}

#message-box {
  width: 67%;
  padding: 0.87em;
  background: #efd54f;
  color: white;
  max-width: 720px;
  min-width: 320px;
  margin-top: auto;
}

img {
  float: right;
  height: auto;
  width: 33.33%;
}

aside {
  margin: 16px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

aside button {
  margin: 6px;
  font-size: 14px;
  background: transparent;
  border: 1px solid white;
  border-radius: 24px;
  padding: 4px 8px;
  color: white;
  cursor: pointer;
}

aside button:hover,
aside button:active,
aside button.active,
aside button[data-gray-class="none"] {
  background: white;
  color: #ff6f61;
}

aside button[data-gray-class="everything"] {
  border-width: 2px;
}

aside button[data-gray-class="none"]:hover {
  border-color: white;
  background: #ff6f61;
  color: white;
}

aside button:focus {
  outline: 0 none;
}


/* These classes determine the different appearances */

.opacity {
  opacity: 0.6;
}

.grayscale {
  filter: grayscale(100%);
}

.blur {
  filter: blur(3px);
}

.opacitygrayscale {
  opacity: 0.6;
  filter: grayscale(100%);
}

.opacityblur {
  opacity: 0.6;
  filter: blur(3px);
}

.grayscaleblur {
  filter: blur(3px) grayscale(100%);
}

.everything {
  filter: blur(3px) grayscale(100%);
  opacity: 0.6
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Comfortaa:700|Source+Sans+Pro" rel="stylesheet">
<div id="message-box">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="StackOverflow logo">
  <h2>I am a message box</h2>
  <p>Sent by <em>StackOverflow</em></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
    Mauris massa. Vestibulum lacinia arcu eget nulla.</p>

  <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis.
    Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed,
    euismod in, nibh.</p>
</div>

<aside>
  <button data-gray-class="none">Reset</button>
  <button data-gray-class="opacity">Opacity</button>
  <button data-gray-class="grayscale">Grayscale</button>
  <button data-gray-class="blur">Blur</button>
  <button data-gray-class="opacitygrayscale">Opacity &amp; grayscale</button>
  <button data-gray-class="opacityblur">Opacity &amp; blur</button>
  <button data-gray-class="grayscaleblur">Grayscale &amp; blur</button>
  <button data-gray-class="everything">Opacity, grayscale &amp; blur</button>
</aside>

---

2018年2月7日更新

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

Answer 2

创建另一个位于＃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>

Answer 3

可能你可以这样写：

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

Answer 4

与其他解决方案不同，它可以提供您所需的内容（禁用项目）。

你使用jQuery吗？如果你这样做很容易。你必须致电$('#messages-box').children().attr("disabled", "disabled"); 这允许输入被禁用。

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

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

希望这会有所帮助。

Answer 5

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

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

Answer 6

在框中添加一个类，并基于该类的任何“灰色”样式。这样，您只需在一个地方切换一个类即可进行所有更改。

Answer 7

你也可以切换一个类，让CSS＆＃39; :before处理它：

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