☰

CSSでボックスをグレーアウトする方法 質問する

tag-icon • tag-icon css
CSSでボックスをグレーアウトする方法 質問する

タイトル、本文、送信者、アバター、抜粋を含む要素 #messages-box があります。ここで、#message-box 内のすべての要素をグレー表示にしたいと思います。

各要素のプロパティを設定して、すべてをグレーにできることはわかっています。しかし、#message-box のプロパティだけを変更できる方法はありますか?

必要なのは、#message-box を覆う灰色のベールのようなものだけです。

ありがとう。

ベストアンサー1

不透明度を使用しないのはなぜですか?

次のように言ってください:

#message-box {opacity: 0.5;}

実際に無効にする（つまり、クリックイベントを許可しない）場合は、pointer-events: none;2016年のブラウザサポートはとても良い。

2017年2月1日更新

この回答はまだ注目を集めているので、より優れた、視覚的に魅力的な例を示すことにしました。(例を全画面で開くことをお勧めします。)

下の例では、以前のアプローチであるopacity「グレーアウト」の外観を作成するために使用しました。ただし、filterあなたができる財産実は灰色にします。IEのサポートが必要なければ、サポートは良好ですgrayscaleやなどの値を使用したりblur、それらを プロパティと組み合わせたりすることでopacity、視覚的に魅力的な「グレーアウト」効果を実現できます。

この例では追加しませんでしたpointer-events: noneが、特定のケースでは役立つ可能性があることに注意してください。

const messageBox = $("#message-box");
  
$("button[data-gray-class]").click(function() {
  const $this = $(this);
  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: #e55e51;
  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: #fbdd44;
  color: #a39135;
  max-width: 720px;
  min-width: 320px;
  margin-top: auto;
}

#message-box h2 {color: #516214;}

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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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日更新

引き続き注目が集まっているため、上記のスニペットを視覚的に更新し、いくつかのオプションを追加しました。お楽しみください。

おすすめ記事