Ảnh nền bộ lọc CSS

Để có hiệu ứng làm mờ, hãy sử dụng thuộc tính bộ lọc CSS, cho phép tạo các hiệu ứng như làm mờ hoặc chuyển màu trên một phần tử

Chức năng làm mờ của thuộc tính bộ lọc thêm độ mờ Gaussian vào hình ảnh đầu vào. Giá trị của bán kính chỉ định giá trị của độ lệch chuẩn cho hàm Gaussian hoặc số pixel trên màn hình hòa trộn với nhau để giá trị lớn hơn sẽ tạo ra nhiều mờ hơn. Nếu không có tham số nào được cung cấp thì giá trị 0 được sử dụng. Tham số được chỉ định dưới dạng độ dài CSS, nhưng không chấp nhận giá trị phần trăm

cú pháp

Để áp dụng hiệu ứng làm mờ cho ảnh nền, với chức năng làm mờ, sử dụng thuộc tính z-index để đặt thứ tự ngăn xếp của phần tử, đặt chiều rộng và chiều cao 100% để có ảnh nền đầy đủ. Đặt thuộc tính vị trí có giá trị tuyệt đối để định vị phần tử so với tổ tiên được định vị gần nhất

Mục đích của bài viết này là tìm hiểu cách thêm bộ lọc vào hình ảnh bằng CSS. Thuộc tính bộ lọc CSS được sử dụng để đặt hiệu ứng hình ảnh của một phần tử. Thuộc tính này chủ yếu được sử dụng trong nội dung hình ảnh

cú pháp

lọc. không ai. mơ hồ(). độ sáng(). tương phản(). bóng đổ (). thang độ xám(). hue-rotate(). đảo ngược(). độ mờ(). bão hòa (). nâu đỏ(). url();

---

Tìm hiểu cách tạo ảnh nền mờ bằng CSS

---

Làm mờ hình nền

Ghi chú. Ví dụ này không hoạt động trong Edge 12, IE 11 hoặc các phiên bản cũ hơn

Tự mình thử »

---

Cách tạo ảnh nền mờ

Bước 1) Thêm HTML

Thí dụ

Tôi là John Doe

Và tôi là một nhiếp ảnh gia

---

---

Bước 2) Thêm CSS

Thí dụ

body, html {
  chiều cao. 100%;
}

* {
  kích thước hộp. hộp viền;
}

.bg-image {
  /* Hình ảnh được sử dụng */
  background-image. url("nhiếp ảnh gia. jpg");

  /* Thêm hiệu ứng làm mờ */
  bộ lọc. blur(8px);
  -webkit-filter. làm mờ(8px);

  /* Chiều cao đầy đủ */
  chiều cao. 100%;

  /* Căn giữa và chia tỷ lệ hình ảnh đẹp mắt */
  background-position. trung tâm;
  lặp lại nền. không lặp lại;
  kích thước nền. bìa;
}

/* Định vị văn bản ở giữa trang/hình ảnh */
. bg-text {
  màu nền. rgb(0,0,0); . rgba(0,0,0, 0. 4); . màu trắng;
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  độ dày phông chữ. in đậm;
  đường viền. 3px solid #f1f1f1;
  vị trí. tuyệt đối;
  trên cùng. 50%;
  còn lại. 50%;
  biến đổi. translate(-50%, -50%);
  z-index. 2;
  chiều rộng. 80%;
  phần đệm. 20px;
  căn chỉnh văn bản. trung tâm;
}

Tự mình thử »

lọc. không ai. mơ hồ(). độ sáng(). tương phản(). bóng đổ (). thang độ xám(). hue-rotate(). đảo ngược(). độ mờ(). bão hòa (). nâu đỏ(). url();

Mẹo. Để sử dụng nhiều bộ lọc, hãy tách từng bộ lọc bằng dấu cách. Lưu ý rằng thứ tự là quan trọng (i. e. sử dụng thang độ xám () sau màu nâu đỏ () sẽ dẫn đến hình ảnh hoàn toàn màu xám)

Thuộc tính CSS backdrop-filter cho phép bạn áp dụng các hiệu ứng đồ họa như làm mờ hoặc chuyển màu cho khu vực phía sau một phần tử. Bởi vì nó áp dụng cho mọi thứ phía sau phần tử, để thấy được hiệu ứng, bạn phải làm cho phần tử hoặc nền của phần tử ít nhất trong suốt một phần

Thử nó

cú pháp

/* Keyword value */
backdrop-filter: none;

/* URL to SVG filter */
backdrop-filter: url(commonfilters.svg#filter);

/*  values */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* Multiple filters */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* Global values */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: revert-layer;
backdrop-filter: unset;

giá trị

none

Không có bộ lọc nào được áp dụng cho phông nền

Danh sách được phân tách bằng dấu cách hoặc bộ lọc SVG sẽ được áp dụng cho phông nền

định nghĩa chính thức

Giá trị ban đầunoneÁp dụng cho tất cả các phần tử;

Làm cách nào để đặt hình nền trong CSS?

Ảnh nền CSS .

Đặt hình nền cho trang. cơ thể {hình nền. url("giấy. gif"); }.

Ví dụ này cho thấy sự kết hợp không tốt giữa văn bản và hình nền. Các văn bản là khó có thể đọc được. cơ thể {hình nền. url("bgdesert. jpg");.

p { hình nền. url("giấy. gif"); } Tự mình thử »

Làm cách nào để làm mờ hình nền trong CSS mà không ảnh hưởng đến văn bản?

Bạn có thể làm mờ hình nền của cơ thể bằng cách sử dụng. trước lớp giả để kế thừa hình ảnh và sau đó làm mờ nó. Gói tất cả những thứ đó vào một lớp và sử dụng javascript để thêm và xóa lớp để làm mờ và làm mờ

Là gì. phông nền trong CSS?

Các. phần tử giả CSS phông nền là hộp có kích thước bằng khung nhìn được hiển thị ngay bên dưới bất kỳ phần tử nào đang được trình bày ở chế độ toàn màn hình . Điều này bao gồm cả hai yếu tố đã được đặt ở chế độ toàn màn hình bằng cách sử dụng API toàn màn hình và các yếu tố