html - 如何使用 css 创建深色叠加层？

问题描述

我必须实现如图所示的这种效果，其中卡片处于焦点位置，背景中的所有内容都有深色覆盖。

到目前为止，我已经能够模糊背景并使卡片保持焦点。看看示例代码。注意：html 文件只是一堆随机文本，请忽略它。div唯一重要的元素是class box需要重点关注的元素。

* {
  margin: 0; padding: 0; box-sizing: border-box;
}

body {
  height: 100vh;
  background: lavender;
}

.box {
  position: absolute;
  height: 50vh;
  width: 50vw;
  top: 25vh;
  left: 25vw;
  border: 4px solid black;
  background: lime;
}

body>*:not(.box) {
  filter: blur(3px);
}

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh sed pulvinar proin gravida. Congue quisque egestas diam in arcu cursus. Quam adipiscing vitae proin sagittis nisl rhoncus
    mattis. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Id diam maecenas ultricies mi eget mauris pharetra. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Et odio pellentesque diam volutpat. Tincidunt arcu non
    sodales neque. Nunc consequat interdum varius sit amet mattis vulputate enim. Dictumst quisque sagittis purus sit amet volutpat. Viverra justo nec ultrices dui sapien eget mi proin sed. Id aliquet risus feugiat in ante metus dictum at. Vitae congue
    mauris rhoncus aenean vel. Nunc sed id semper risus. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Sapien pellentesque habitant morbi tristique senectus et netus.
    Magnis dis parturient montes nascetur ridiculus mus mauris vitae. Morbi tincidunt augue interdum velit euismod in pellentesque. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Velit ut tortor pretium viverra. Pellentesque habitant
    morbi tristique senectus et netus et malesuada fames. Vitae suscipit tellus mauris a diam maecenas sed enim ut. At ultrices mi tempus imperdiet nulla malesuada pellentesque. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ipsum dolor
    sit amet consectetur adipiscing elit ut. Convallis a cras semper auctor. Risus feugiat in ante metus dictum at tempor commodo. Nisi quis eleifend quam adipiscing vitae. Velit dignissim sodales ut eu. Morbi blandit cursus risus at. Mauris sit amet
    massa vitae tortor condimentum lacinia quis. Ultrices vitae auctor eu augue. Tortor at auctor urna nunc. Lacus luctus accumsan tortor posuere ac ut consequat. Egestas congue quisque egestas diam in arcu cursus euismod. Suspendisse potenti nullam ac
    tortor vitae purus. Sed adipiscing diam donec adipiscing tristique. Parturient montes nascetur ridiculus mus mauris. Ac placerat vestibulum lectus mauris ultrices eros in cursus turpis. In hac habitasse platea dictumst vestibulum rhoncus. Ut sem viverra
    aliquet eget sit amet tellus cras. Tincidunt nunc pulvinar sapien et. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Mattis pellentesque id nibh tortor id aliquet lectus proin. Nulla pharetra diam sit amet nisl suscipit
    adipiscing. Cursus eget nunc scelerisque viverra mauris in aliquam sem. Magna sit amet purus gravida quis. Suspendisse sed nisi lacus sed viverra tellus in. Viverra maecenas accumsan lacus vel facilisis volutpat est. Consequat interdum varius sit
    amet. Tempus urna et pharetra pharetra massa massa ultricies. Facilisi cras fermentum odio eu. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. Nascetur
    ridiculus mus mauris vitae. Sit amet volutpat consequat mauris nunc congue. Facilisi cras fermentum odio eu feugiat. Egestas integer eget aliquet nibh praesent tristique. Purus viverra accumsan in nisl nisi. Ultrices tincidunt arcu non sodales neque
    sodales. In nibh mauris cursus mattis molestie. Facilisi etiam dignissim diam quis enim lobortis. Proin sed libero enim sed. Elit duis tristique sollicitudin nibh sit amet. Eget arcu dictum varius duis at consectetur lorem. Consectetur a erat nam
    at lectus. Diam sit amet nisl suscipit adipiscing bibendum est. Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim. Nulla facilisi cras fermentum odio eu feugiat
    pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim. Varius quam quisque id diam vel quam elementum
    pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere ac. Aliquam nulla facilisi cras fermentum odio
    eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Vitae et leo duis ut
    diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim. Nulla facilisi cras fermentum
    odio eu feugiat pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim. Varius quam quisque id diam vel
    quam elementum pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere ac. Aliquam nulla facilisi cras
    fermentum odio eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Vitae
    et leo duis ut diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim. Nulla facilisi
    cras fermentum odio eu feugiat pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim. Varius quam quisque
    id diam vel quam elementum pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere ac. Aliquam nulla
    facilisi cras fermentum odio eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse in est ante in
    nibh. Vitae et leo duis ut diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim. Nulla
    facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim. Varius
    quam quisque id diam vel quam elementum pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere ac. Aliquam
    nulla facilisi cras fermentum odio eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse in est
    ante in nibh. Vitae et leo duis ut diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim.
    Nulla facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim.
    Varius quam quisque id diam vel quam elementum pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere
    ac. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse
    in est ante in nibh. Vitae et leo duis ut diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et.
  </p>
  <div class="box"></div>
</body>

</html>

标签： htmlcss

解决方案

你的代码很好，只需要注意两件事：

您的 CSS 重置中有语法错误（这是主要问题）

* {
    margin: 0, padding: 0, box-sizing: border-box;
  }

你用,而不是;

添加您选择的背景颜色（在您的情况下，为深灰色）

* {
  margin: 0; padding: 0; box-sizing: border-box;
}

body {
  height: 100vh;
  background: lavender;
}

.box {
  position: absolute;
  height: 50vh;
  width: 50vw;
  top: 25vh;
  left: 25vw;
  border: 4px solid black;
  background: lime;
}

body>*:not(.box) {
  filter: blur(3px);
  background-color: grey;
}

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh sed pulvinar proin gravida. Congue quisque egestas diam in arcu cursus. Quam adipiscing vitae proin sagittis nisl rhoncus
    mattis. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Id diam maecenas ultricies mi eget mauris pharetra. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Et odio pellentesque diam volutpat. Tincidunt arcu non
    sodales neque. Nunc consequat interdum varius sit amet mattis vulputate enim. Dictumst quisque sagittis purus sit amet volutpat. Viverra justo nec ultrices dui sapien eget mi proin sed. Id aliquet risus feugiat in ante metus dictum at. Vitae congue
    mauris rhoncus aenean vel. Nunc sed id semper risus. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Sapien pellentesque habitant morbi tristique senectus et netus.
    Magnis dis parturient montes nascetur ridiculus mus mauris vitae. Morbi tincidunt augue interdum velit euismod in pellentesque. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Velit ut tortor pretium viverra. Pellentesque habitant
    morbi tristique senectus et netus et malesuada fames. Vitae suscipit tellus mauris a diam maecenas sed enim ut. At ultrices mi tempus imperdiet nulla malesuada pellentesque. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ipsum dolor
    sit amet consectetur adipiscing elit ut. Convallis a cras semper auctor. Risus feugiat in ante metus dictum at tempor commodo. Nisi quis eleifend quam adipiscing vitae. Velit dignissim sodales ut eu. Morbi blandit cursus risus at. Mauris sit amet
    massa vitae tortor condimentum lacinia quis. Ultrices vitae auctor eu augue. Tortor at auctor urna nunc. Lacus luctus accumsan tortor posuere ac ut consequat. Egestas congue quisque egestas diam in arcu cursus euismod. Suspendisse potenti nullam ac
    tortor vitae purus. Sed adipiscing diam donec adipiscing tristique. Parturient montes nascetur ridiculus mus mauris. Ac placerat vestibulum lectus mauris ultrices eros in cursus turpis. In hac habitasse platea dictumst vestibulum rhoncus. Ut sem viverra
    aliquet eget sit amet tellus cras. Tincidunt nunc pulvinar sapien et. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Mattis pellentesque id nibh tortor id aliquet lectus proin. Nulla pharetra diam sit amet nisl suscipit
    adipiscing. Cursus eget nunc scelerisque viverra mauris in aliquam sem. Magna sit amet purus gravida quis. Suspendisse sed nisi lacus sed viverra tellus in. Viverra maecenas accumsan lacus vel facilisis volutpat est. Consequat interdum varius sit
    amet. Tempus urna et pharetra pharetra massa massa ultricies. Facilisi cras fermentum odio eu. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. Nascetur
    ridiculus mus mauris vitae. Sit amet volutpat consequat mauris nunc congue. Facilisi cras fermentum odio eu feugiat. Egestas integer eget aliquet nibh praesent tristique. Purus viverra accumsan in nisl nisi. Ultrices tincidunt arcu non sodales neque
    sodales. In nibh mauris cursus mattis molestie. Facilisi etiam dignissim diam quis enim lobortis. Proin sed libero enim sed. Elit duis tristique sollicitudin nibh sit amet. Eget arcu dictum varius duis at consectetur lorem. Consectetur a erat nam
    at lectus. Diam sit amet nisl suscipit adipiscing bibendum est. Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim. Nulla facilisi cras fermentum odio eu feugiat
    pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim. Varius quam quisque id diam vel quam elementum
    pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere ac. Aliquam nulla facilisi cras fermentum odio
    eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Vitae et leo duis ut
    diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim. Nulla facilisi cras fermentum
    odio eu feugiat pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim. Varius quam quisque id diam vel
    quam elementum pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere ac. Aliquam nulla facilisi cras
    fermentum odio eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Vitae
    et leo duis ut diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim. Nulla facilisi
    cras fermentum odio eu feugiat pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim. Varius quam quisque
    id diam vel quam elementum pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere ac. Aliquam nulla
    facilisi cras fermentum odio eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse in est ante in
    nibh. Vitae et leo duis ut diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim. Nulla
    facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim. Varius
    quam quisque id diam vel quam elementum pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere ac. Aliquam
    nulla facilisi cras fermentum odio eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse in est
    ante in nibh. Vitae et leo duis ut diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim.
    Nulla facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim.
    Varius quam quisque id diam vel quam elementum pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere
    ac. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse
    in est ante in nibh. Vitae et leo duis ut diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et.
  </p>
  <div class="box">TEST</div>
</body>

</html>

html - 如何使用 css 创建深色叠加层？

问题描述

解决方案

推荐阅读