Laravel中CSS背景模糊滤镜失效求助：仅模糊内容而非背景

你当前的问题是把filter: blur()直接加在了包含登录框的.login-page容器上，导致容器内所有元素（包括登录表单）都被模糊，背景作为容器的一部分和内容一起被模糊，视觉上就出现“唯独背景没模糊”的错觉。

修复步骤： #

• 给背景单独创建独立容器，与登录框同级作为底层背景
• 将背景样式和模糊效果转移到这个新容器上
• 调整原容器样式，专注布局，移除背景和模糊属性

修改后的login.blade.php代码： #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SunnyStateNET | Login</title>
  @include('layouts.template-parts.head-scripts')
</head>

<body class="hold-transition login-page">
  <!-- 新增背景模糊容器 -->
  <div class="login-background"></div>
  
  <div class="dark-mode login-box">
    <!-- /.login-logo -->
    <div class="card card-outline card-primary">
      <div class="card-header text-center">
        <b>Melde dich mit deinen Daten an.</b>
      </div>
      <div class="dark-mode card-body">
        @if($message = Session::get('error'))
        <div class="alert alert-danger text-center" role="alert">
          <strong>{{$message}}</strong>
        </div>
        @endif
        <form method="POST" action="{{ route('postlogin') }}">
          @csrf
          <div class="input-group mb-3">
            <input type="text" name="username" class="form-control" placeholder="Charaktername">
          </div>
          <div class="dark-mode input-group mb-3">
            <input type="password" name="password" class="form-control" placeholder="Passwort">
          </div>
          <div class="row">
            <!-- /.col -->
            <div class="col-lg-12">
              <button type="submit" class="btn btn-dark btn-block">Anmelden</button>
            </div>
            <!-- /.col -->
          </div>
        </form>
      </div>
      <!-- /.card-body -->
    </div>
    <!-- /.card -->
  </div>
  <!-- /.login-box -->
  @include('layouts.template-parts.footer-scripts')
  @method('scripts')
</body>

</html>

修改后的CSS代码： #

.login-page,
.register-page {
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100vh;
  -ms-flex-pack: center;
  justify-content: center;
  /* 移除原背景和模糊属性 */
  position: relative; /* 新增，让子元素绝对定位基于此容器 */
}

/* 新增背景模糊容器样式 */
.login-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../../images/bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  z-index: -1; /* 让背景在登录框下方 */
}

关键说明： #

• 新增的.login-background容器用绝对定位铺满整个视口，作为独立背景层
• z-index: -1确保背景在所有内容下方，不会遮挡登录框
• 模糊效果仅作用于背景容器，登录框等内容不受影响

内容的提问来源于stack exchange，提问作者AymsRX