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ảnhThí dụ. Tạo hình nền mờ bằng thuộc tính bộ lọc
HTML
body, html {
height: 100%;
}
.container {
position: relative;
background-image: url["//s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627476216-101156.png"];
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
filter: blur[8px]; /* Adding blur background image */
}
.text {
text-align: center;
position: absolute;
left : 30%;
top: 30%;
width: 50%;
background-color: rgba[256 , 256,256,0.5];
font-size: 30px;
}
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ềnSự 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
Sample content