Skip to content

Instantly share code, notes, and snippets.

@LeeDDHH

LeeDDHH/css-emphasis-element-with-overlay.md

Created March 15, 2024 04:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save LeeDDHH/50f54dd64a95509e9bc27cd7fec0eeb6 to your computer and use it in GitHub Desktop.
Save LeeDDHH/50f54dd64a95509e9bc27cd7fec0eeb6 to your computer and use it in GitHub Desktop.
Download ZIP
オーバーレイをかけて一部の要素だけを強調させるCSS
Raw
css-emphasis-element-with-overlay.md 
<div>
  <div>
    <div class="other_one"></div>
    <div class="other_one"></div>
    <div class="other_one"></div>
    <div class="important"></div>
    <div class="other_one"></div>
    <div class="other_one"></div>
    <div class="other_one"></div>
  </div>
  <div class="overlay"></div>
</div>
.overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(0,0,0,0.5);
}
.important {
  position: relative;
  z-index: 2;
  background-color: #fff;
}

参考

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment