技术需求：为Ngx-admin仪表盘页面添加类似Blur-admin的背景图

Hey there! Let's get that Blur-admin style blurred background set up on your Ngx-admin dashboard. Here's a straightforward, step-by-step guide to make it happen:

• Grab a high-quality, soft-toned image (muted colors work best to keep dashboard elements readable). Save it in your project's assets folder, for example: src/assets/images/dashboard-bg.jpg.

Ngx-admin wraps its dashboard content in a specific container. Open your dashboard component's styles file (like dashboard.component.scss) to add custom CSS.

Paste this snippet into your component's styles. It replicates the layered, blurred background effect from Blur-admin:

/* Target the main dashboard container */
:host ::ng-deep .nb-layout-content {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

/* Create the blurred background layer */
:host ::ng-deep .nb-layout-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../../../assets/images/dashboard-bg.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(8px);
  z-index: -1;
  transform: scale(1.1); /* Fixes edge gaps caused by blur */
}

/* Optional: Add a semi-transparent overlay for better content readability */
:host ::ng-deep .dashboard-page-container {
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1rem;
}

Quick breakdown of the code:

• ::ng-deep lets us bypass Ngx-admin's style encapsulation to target its core layout elements.
• The ::before pseudo-element creates a background layer that sits behind your dashboard content (thanks to z-index: -1).
• The transform: scale(1.1) trick eliminates the white edges that often appear when blurring a background image.
• The optional overlay adds a subtle white tint to your dashboard cards, ensuring text and widgets stay clear against the blurred background.

If the styles don't apply right away, use your browser's dev tools to inspect the dashboard page and find the exact parent container class. Depending on your Ngx-admin version, it might be .dashboard-container instead of .nb-layout-content.

• Mess with the filter: blur() value (6-12px is a sweet spot for matching Blur-admin's look).
• Adjust the overlay's rgba opacity to balance readability and the blurred background visibility.

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