如何使用Angular JS实现除中间Div内容外的页面整体模糊效果？

I get that you’ve nailed the layout but are stuck on blurring everything except your target content—most solutions out there fixate on form scenarios, so let’s tailor this to your use case. Here’s how to make it work, with tweaks to your existing code:

Step 1: Adjust Your HTML Structure #

First, we need two key additions:

• A full-screen overlay that applies the blur effect to the background
• A container for your "clear" content that sits above the overlay

Here’s your modified HTML with these elements included:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    /* Blur overlay styles */
    .blur-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* Apply blur to content behind the overlay */
      backdrop-filter: blur(8px);
      /* Fallback for older browsers */
      filter: blur(8px);
      z-index: 10;
    }
    
    /* Clear content container */
    .clear-content {
      position: relative;
      z-index: 20; /* Ensures this sits above the blur overlay */
      margin: 0 auto;
      padding: 20px;
    }
  </style>
</head>
<body>
  <!-- Blur overlay covers the entire page -->
  <div class="blur-overlay"></div>
  
  <!-- Your unblurred content goes here -->
  <div class="clear-content">
    <div class="container">
      <center>
        <h3 class="container">Select a type</h3>
        <div>This is to test the page: 
          <div class = "btn-group pull-center">
            <button type = "button" class = "btn dropdown-toggle" data-toggle = "dropdown">Dropdown 
              <span class = "caret"></span>
            </button>
            <ul class = "dropdown-menu" role = "menu">
              <li>Action</li>
              <li>Another action</li>
              <li>Something else here</li>
            </ul>
          </div>
        </div>
      </center>
    </div><br/><br/>
    <div class="container" style="margin-left:15cm">
      <div class="row">
        <div class="col-md-6">
          <p class="col-md-6"><b>Your paragraph goes here</b><br/>This is to test the page</p>
        </div>
        <div class="col-md-4">
          <div class="row">
            <div class="btn btn-primary col-md-6">button 1</div><br/><br/>
          </div>
          <div class="row">
            <div class="btn btn-success col-md-6">button 2</div><br/><br/>
          </div>
          <div class="row">
            <div class="btn btn-warning col-md-6">button 3</div>
            <br/><br/>
          </div>
        </div>
      </div>
      <hr style="margin-right:9cm"></hr>
    </div>
    <div class="container" style="margin-left:15cm">
      <div class="row">
        <div class="col-md-6">
          <p class="col-md-6"><b>Your paragraph goes here</b><br/>empty space between </p>
        </div>
        <div class="col-md-4">
          <div class="row">
            <div class="btn btn-danger col-md-6">Button 4</div><br/><br/>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Step 2: How It Works #

• The .blur-overlay is fixed to cover the entire viewport. backdrop-filter: blur(8px) applies the blur effect directly to the content behind it. For older browsers that don’t support backdrop-filter, filter: blur(8px) acts as a fallback (it blurs the overlay itself, but still achieves a similar visual effect).
• The .clear-content container uses a higher z-index to sit above the overlay, keeping its content sharp and unblurred.

For AngularJS Integration #

If you’re using AngularJS and need to toggle the blur effect dynamically (e.g., on a button click), here’s how to adapt it:

• Use ng-class to add/remove the blur overlay based on a scope variable:

  <div class="blur-overlay" ng-class="{ 'active': isBlurred }"></div>
  

• In your controller, add logic to toggle the state:

  $scope.isBlurred = true; // Set to false to disable blur
  
  $scope.toggleBlur = function() {
    $scope.isBlurred = !$scope.isBlurred;
  };
  

• Update the CSS to apply blur only when the active class is present:

  .blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    backdrop-filter: blur(0);
    filter: blur(0);
    transition: all 0.3s ease; /* Smooth transition between states */
  }
  
  .blur-overlay.active {
    backdrop-filter: blur(8px);
    filter: blur(8px);
  }
  

This setup will give you exactly what you need—everything except your specified div will be blurred, no matter what type of content you’re working with.

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