Question

我目前正在构建应用程序的主页。我想要一个带有登录按钮的简单模糊背景。我使用了blur(1px)，但无法使其仅在背景模糊。会使整个页面模糊。

body, html {
  height: 100%;
}

* {
  box-sizing: border-box;
}

.hero.is-info {
  filter: blur(1px);
  -webkit-filter: blur(1px);

  background: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url('https://unsplash.it/1200/900?random') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.login{
  z-index: 2;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello</title>
    <link
      rel="stylesheet"
      href="https://jenil.github.io/bulmaswatch/litera/bulmaswatch.min.css"
    />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="section hero is-info is-fullheight has-text-centered">
      <div class="hero-body login">
        <div class="container">
          <h1 class="title">Title</h1>
          <div id="root"></div>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

对这些行为使用伪元素。

使用::before或::after作为您的图块的覆盖。

尝试一下

body, html {
  height: 100%;
}

* {
  box-sizing: border-box;
}
.hero.is-info{height:100vh;}
.hero.is-info::before {
  filter: blur(1px);
  -webkit-filter: blur(1px);
  position:absolute;
  top:0;
  content:"";
  left:0; 
  width:100%; 
  height:100%;
  background: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url('https://unsplash.it/1200/900?random') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.login{
  z-index: 2;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello</title>
    <link
      rel="stylesheet"
      href="https://jenil.github.io/bulmaswatch/litera/bulmaswatch.min.css"
    />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="section hero is-info is-fullheight has-text-centered">
      <div class="hero-body login">
        <div class="container">
          <h1 class="title">Title</h1>
          <div id="root"></div>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 2

这是一个简单的CSS解决方案，没有伪类，但是还有一个div：

body,
html {
  height: 100%;
}

* {
  box-sizing: border-box;
}

.hero.section {
  padding: 0;
}

.hero .blured-background {
  width: 100%;
  height: 100%;
  position: absolute;
  filter: blur(1px);
  -webkit-filter: blur(1px);
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://unsplash.it/1200/900?random') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.login {
  z-index: 2;
}

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello</title>
    <link rel="stylesheet" href="https://jenil.github.io/bulmaswatch/litera/bulmaswatch.min.css" />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="section hero is-info is-fullheight has-text-centered">
      <div class="blured-background">
      </div>
      <div class="hero-body login">
        <div class="container">
          <h1 class="title">Title</h1>
          <div id="root"></div>
        </div>
      </div>
    </div>
  </body>
</html>

仅对背景模糊效果

2 个答案: