Làm cách nào để bạn thêm lớp phủ mờ trong css?

Nền mờ được các nhà phát triển trang web yêu thích. Nền hình ảnh mờ sẽ nâng cao giao diện của trang web. Với nền mờ, người dùng sẽ dễ dàng phân biệt các thành phần khác trên trang. Sau đây chúng ta sẽ học tạo ảnh nền mờ bằng CSS

Tạo hình nền mờ

Nền mờ có thể được tạo bằng thuộc tính bộ lọc CSS. Thêm filter: blur để làm như vậy. Một thuộc tính CSS khác để thêm ảnh nền mờ là backdrop-filter. Sử dụng backdrop-filter: blur để làm như vậy.Nhưng

.simple-background {
  height: 150px;
  width: 150px;
  background-image: url(/img/2022/brave-browser.png);
  background-size: cover;
  filter: blur(30px);
  transition: 100ms filter linear;
}
.simple-background:hover {
  filter: none;
}

0 sẽ không làm mờ toàn bộ ảnh nền thay vào đó nó sẽ làm mờ phông nền của các yếu tố tiền cảnh

Thí dụ. Tạo hình nền mờ bằng thuộc tính bộ lọc

   

    

	    
 Blured background image 
		
 We have use filtered property for it
	

đầu ra

Đây là đầu ra của chương trình trên

Thí dụ. Thêm một hình ảnh mờ với bộ lọc phông nền

Ở đây, chúng tôi thêm bộ lọc phông nền. blur(5px) để làm mờ nền của phần tử chứa nó. Chúng tôi đã đặt

.simple-background {
  height: 150px;
  width: 150px;
  background-image: url(/img/2022/brave-browser.png);
  background-size: cover;
  filter: blur(30px);
  transition: 100ms filter linear;
}
.simple-background:hover {
  filter: none;
}

1 thành 100% trong khi

.simple-background {
  height: 150px;
  width: 150px;
  background-image: url(/img/2022/brave-browser.png);
  background-size: cover;
  filter: blur(30px);
  transition: 100ms filter linear;
}
.simple-background:hover {
  filter: none;
}

2 thành 50% của vùng chứa chính để bạn có thể thấy sự khác biệt giữa cả hai nền

Sự kết luận

Trong hướng dẫn này, chúng ta đã học cách thêm hình nền mờ bằng CSS. Chúng tôi đã sử dụng thuộc tính bộ lọc để làm mờ toàn bộ hình nền. Chúng tôi cũng có thể sử dụng bộ lọc phông nền để chỉ làm mờ các vùng được chỉ định

Để 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

Làm mờ hình ảnh là một phong cách phổ biến trên web. Nó có thể cung cấp độ tương phản cần thiết và sự quan tâm trực quan. Giờ đây, bạn có thể làm mờ trước hình ảnh bằng chương trình chỉnh sửa ảnh, nhưng với mục đích của bài viết này, chúng tôi sẽ tập trung vào các phương pháp CSS

Hiệu ứng mờ đơn giản

Loại làm mờ đầu tiên dành cho hình nền không có lớp phủ nội dung. Chúng chỉ đơn giản là một hình ảnh cần được làm mờ đi. Điều này có thể hữu ích để làm mờ hình ảnh và sau đó đưa hình ảnh vào tiêu cự khi trạng thái di chuột được kích hoạt. Hãy thử di chuột qua hình nền sau

Điều này đạt được bằng cách sử dụng css sau

.simple-background {
  height: 150px;
  width: 150px;
  background-image: url(/img/2022/brave-browser.png);
  background-size: cover;
  filter: blur(30px);
  transition: 100ms filter linear;
}
.simple-background:hover {
  filter: none;
}

Trước tiên, chúng tôi đặt độ mờ Gaussian trên phần tử bằng cách sử dụng

.simple-background {
  height: 150px;
  width: 150px;
  background-image: url(/img/2022/brave-browser.png);
  background-size: cover;
  filter: blur(30px);
  transition: 100ms filter linear;
}
.simple-background:hover {
  filter: none;
}

3. Tiếp theo sau khi chúng tôi đặt url cho hình nền, chúng tôi cung cấp

.simple-background {
  height: 150px;
  width: 150px;
  background-image: url(/img/2022/brave-browser.png);
  background-size: cover;
  filter: blur(30px);
  transition: 100ms filter linear;
}
.simple-background:hover {
  filter: none;
}

4. Điều này chia tỷ lệ hình ảnh để vừa với vùng chứa và giúp tránh hiệu ứng xếp chồng. Tiếp theo, một

.simple-background {
  height: 150px;
  width: 150px;
  background-image: url(/img/2022/brave-browser.png);
  background-size: cover;
  filter: blur(30px);
  transition: 100ms filter linear;
}
.simple-background:hover {
  filter: none;
}

5 trên kiểu bắt đầu để cho phép phần tử chuyển đổi hiệu ứng làm mờ của nó. Cuối cùng,

.simple-background {
  height: 150px;
  width: 150px;
  background-image: url(/img/2022/brave-browser.png);
  background-size: cover;
  filter: blur(30px);
  transition: 100ms filter linear;
}
.simple-background:hover {
  filter: none;
}

6 được sử dụng khi di chuột qua phần tử

Một hình ảnh mờ với văn bản lớp phủ

Mọi thứ trở nên phức tạp hơn nếu bạn muốn làm mờ nền đồng thời có lớp phủ văn bản. Hãy cùng xem ví dụ sau

Nội dung mẫu

 class="content-example">
  
Sample content

.simple-background {
  height: 150px;
  width: 150px;
  background-image: url(/img/2022/brave-browser.png);
  background-size: cover;
  filter: blur(30px);
  transition: 100ms filter linear;
}
.simple-background:hover {
  filter: none;
}

 class="advanced__background">
   class="advanced__backgroundBody">
    
Sample content

.simple-background {
  height: 150px;
  width: 150px;
  background-image: url(/img/2022/brave-browser.png);
  background-size: cover;
  filter: blur(30px);
  transition: 100ms filter linear;
}
.simple-background:hover {
  filter: none;
}

.simple-background {
  height: 150px;
  width: 150px;
  background-image: url(/img/2022/brave-browser.png);
  background-size: cover;
  filter: blur(30px);
  transition: 100ms filter linear;
}
.simple-background:hover {
  filter: none;
}

 class="content-example">
  
Sample content

.advanced__background {
  background-image: url(/img/2022/brave-browser.png);
  height: 150px;
  width: 150px;
  background-size: cover;
}
.advanced__backgroundBody {
  position:  relative;
  height: 100%;
  width: 100%;
  backdrop-filter: blur(30px);
  transition: 100ms backdrop-filter linear;
}
.advanced__backgroundBody:hover {
  backdrop-filter: none;
}
.advanced__backgroundBody p {
  color: #fff;
  background: #ccc;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 40% 0%;
}

 class="content-example">
  
Sample content