如何在背景上使用背景滤镜，例如背景模糊或亮度而不影响文本

问题描述 投票：0回答：1

我正在开发一个网络项目，我想对特定部分的背景应用滤镜效果，例如背景模糊或亮度调整。但是，我希望本节中的文本不受这些滤镜效果的影响。

我遇到的问题是 

filter
属性同时应用于背景和文本，而我只想模糊背景（或调整其亮度）而不影响文本。

这是我的 HTML 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="main">
      <div class="container">
        <div class="item">
          <h1>0</h1>
        </div>
      </div>
    </div>
  </body>
</html>

这是我的CSS

.main {
  display: flex;
  justify-content: center;
  filter: blur(2px);
}
.container {
  display: flex;
  justify-content: center;
  background-image: url(images/people1.jpg);

  width: 600px;
  height: 400px;
}

.item {
  color: red;
  font-size: 50px;
}
html css flexbox
1个回答
0
投票

以上问题的答案如下：

.blurred{
  width: 600px;
  height: 300px;
  position: absolute;
  background-image: url(https://blogs.biomedcentral.com/bmcseriesblog/wp-content/uploads/sites/9/2017/12/crowd-620x342.jpg);
  z-index: 0;
  filter: blur(2px) brightness(40%);
}

.home{
  width: 600px;
  height: 300px;
  display: flex;
  justify-content: center;
  position: absolute;
  z-index: 1;
  color: white;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="blurred"></div>
      <div class="home">
        <h1>Page Counter</h1>
      </div>
  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.