Как вырезать окно в CSS

Ответ 1

Создайте еще один div, который находится поверх # message-box с непрозрачностью, скажем, 50% и фоном цвета серого. Когда вам нужно, просто покажите этот оверлейный div. Появится демо.

EDIT: приятная демонстрация, чтобы показать вам, о чем я говорю. Этот подход также имеет преимущество (если, как я полагаю, вы пытаетесь "отключить" div сообщения), чтобы не допустить, чтобы какие-либо клики достигли div ниже него, что фактически отключает нижний div.

Ответ 2

Почему бы не использовать непрозрачность?

Скажите что-нибудь вроде:

#message-box {opacity: 0.5;}

Если вы пытаетесь фактически отключить его (т.е. не разрешаете на нем какие-либо события клика), вы можете использовать pointer-events: none;. Поддержка браузера в 2016 году очень хорошая.

Обновление 1 февраля 2017 года

Этот ответ по-прежнему получает некоторое внимание, поэтому я решил представить лучший, визуально более привлекательный пример. (Я предлагаю открыть этот пример в полноэкранном режиме.)

В приведенном ниже примере я добавил свой предыдущий подход: используйте opacity для создания "серого" вида. Однако, используя свойство filter, вы можете фактически его отключить. Поддержка хорошая, если вам не нужна поддержка IE. Используя значения, такие как grayscale и blur, и даже комбинируя их с свойством opacity, можно достичь визуально привлекательного эффекта "серого".

Обратите внимание, что в этом примере я не добавил pointer-events: none, но он может быть полезен для вашего конкретного случая!

$("button").click(function() {
  var c = $(this).attr("data-gray-class"),
      e = $("#message-box");
  
  e.removeClass();
  if (c != 'none') e.addClass(c);
});

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
body {
  background: #c06565;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#message-box {
  width: 67%;
  padding: 0.87em;
  border-radius: 6px;
  background: #9ccde4;
  color: white;
  max-width: 720px;
  min-width: 320px;
  margin-top: auto;
}
img {
  float: right;
  height: 84px;
  width: auto;
}
.opacity {
  opacity: 0.6
}
.grayscale {
  filter: grayscale(100%);
}
.blurgrayscale {
  filter: blur(3px) grayscale(100%);
}
.everything {
  filter: blur(3px) grayscale(100%);
  opacity: 0.6
}
aside {
  margin-top: 0.8em;
  margin-bottom: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="message-box">
  <img src="http://static02.mediaite.com/themarysue/uploads/2015/12/avatar.jpeg" alt="avatar">
  <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 change</button>
  <button data-gray-class="grayscale">Filter grayscale</button>
  <button data-gray-class="blurgrayscale">Filter grayscale &amp; blur</button>
  <button data-gray-class="everything">Opacity, filter grayscale &amp; blur</button>
</aside>

Ответ 3

Возможно, вы можете написать вот так:

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

Ответ 4

В отличие от другого решения, это обеспечивает именно то, что вам нужно (отключить элементы).

Используете ли вы jQuery? Если вы сделаете это очень легко. Вам нужно будет позвонить $('#messages-box').children().attr("disabled", "disabled"); Это позволяет отключить вход.

Это ссылка на код, который я использовал для проверки этого. http://jsfiddle.net/Vu4Dw/

а затем вы можете просто использовать другого пользователя "gray out css thing", чтобы получить эффект.

Надеется, что это поможет.

Ответ 5

Добавьте класс в поле и создайте все стили "greyed out" для этого класса. Таким образом, вам нужно только переключить один класс в одном месте, чтобы внести все изменения.