如何在CSS中灰显一个框

Question

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

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

我需要的只是一个灰色的面纱覆盖#message-box.

谢谢.

Answer 1

为什么不使用不透明度？

说出类似的话:

#message-box {opacity: 0.5;}

如果您尝试实际禁用它(即不允许任何点击事件),您可以使用pointer-events: none;.2016年的浏览器支持非常好.

2017年2月1日更新

这个答案仍然得到了一些关注,所以我决定提供一个更好的,视觉上更有吸引力的例子.(我建议全屏打开示例.)

在下面的示例中,我添加了我之前的方法:用于opacity创建"灰显"外观.但是,通过使用该filter属性,您实际上可以将其灰显.如果您不需要IE支持,支持很好.通过使用诸如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.即将推出一个演示.

这是一个很好的演示,向您展示我在说什么.这种方法也有好处(如果我假设你试图'禁用'消息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>