如何在 CSS 中使框变灰

How to grey out a box in CSS

提问by AdamNYC

I have an element #messages-box, which include title, body, sender, avatar and excerpt. Now, I would like to grey out all elements in #message-box.

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

I know I can set properties of each of elements to make them all grey. But is there a way so that I can just change properties of #message-box?

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

All I need is something like a grey veil covers #message-box.

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

Thank you.

谢谢你。

采纳答案by Elliot Bonneville

Create another div that sits on top of #message-box with an opacity of say, 50% and a background-color of gray. When you need to, just show this overlay div. A demo is forthcoming.

创建另一个位于 #message-box 顶部的 div，不透明度为 50%，背景颜色为灰色。当您需要时，只需显示此叠加 div。一个演示即将推出。

Here's a nice demoto show you what I'm talking about. This approach also has the benefit (if, as I assume, you're attempting to 'disable' the message div) of prevent any clicks from reaching the div below it, which effectively disables the below div.

这是一个很好的演示，向您展示我在说什么。这种方法还有一个好处（如果，正如我假设的那样，您正在尝试“禁用”消息 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>

回答by Bram Vanroy

Why not use opacity?

为什么不使用不透明度？

Say something like:

像这样说：

#message-box {opacity: 0.5;}

If you are trying to actually disableit (i.e. don't allow any click events on it), you can use pointer-events: none;. Browser support in 2016 is very good.

如果您试图实际禁用它（即不允许在其上发生任何点击事件），您可以使用pointer-events: none;. 2016 年的浏览器支持非常好。

---

---

Update February 1st, 2017

2017 年 2 月 1 日更新

This answer is still getting some attention so I decided to provide a better, visually more attractive example. (I suggest opening the example in full screen.)

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

In the example below I added my previous approach: use opacityto create a 'grayed out' look. However, by using the filterproperty you can actuallygray it out. Support is good, if you don't need IE support. By using values such as grayscaleand blur, and even by combining those with the opacityproperty, a visually appealing 'gray out' effect can be reached.

在下面的示例中，我添加了我以前的方法：用于opacity创建“变灰”外观。但是，通过使用该filter属性，您实际上可以将其变灰。支持是好的，如果你不需要 IE 支持。通过使用值，例如grayscale和blur，甚至通过组合这些与opacity属性，视觉上吸引人的“灰色出”效果可以达到。

Note that I didn't add pointer-events: nonein this example, but it could still be useful for your specific case!

请注意，我没有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>

---

---

Update February 7th, 2018

2018 年 2 月 7 日更新

Because of continuing attention, I visually updated the snippet above and added some options. Enjoy.

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

回答by sandeep

May be you can write like this:

也许你可以这样写：

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

回答by Athiwat Chunlakhan

Unlike other solution this provide exactly what you need(disable the items).

与其他解决方案不同，这提供了您所需要的（禁用项目）。

Do you use jQuery? If you do it's very easy. You will have to call $('#messages-box').children().attr("disabled", "disabled");This allows the input the be disable.

你使用 jQuery 吗？如果你做到了，那就很容易了。你将不得不调用$('#messages-box').children().attr("disabled", "disabled");这允许输入被禁用。

This is the link to the code I used to test this. http://jsfiddle.net/Vu4Dw/

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

and then you could just use other user "grey out css thing" to get the effect..

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

Hopes this helps.

希望这会有所帮助。

回答by Martijn

You could also toggle a class, and let CSS' :beforehandle it:

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

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

回答by Matthew Darnell

Add a class to the box and base any 'greyed out' styles on that class. That way, you only have to toggle one class in one place to make all the changes.

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