Trong bài viết này, chúng ta sẽ xem cách đặt độ mờ của hình nền trong CSS. Độ mờ đục có thể được định nghĩa là chất lượng thiếu minh bạch. Nó có thể được sử dụng để xác định lượng nội dung được hiển thị
Cách tiếp cận. Chúng ta có thể sử dụng thuộc tính độ mờ trong CSS được sử dụng để thay đổi độ mờ của một phần tử. Giá trị của thuộc tính có thể được đặt trong phạm vi từ 0 đến 1, trong đó “0” hoàn toàn trong suốt và “1” mờ đục. Bất kỳ giá trị thập phân nào cũng có thể được sử dụng ở giữa để đặt độ mờ tương ứng
cú pháp
opacity: value;
Thí dụ. Trong ví dụ này, chúng tôi sẽ đặt hình nền thành
và sử dụng thuộc tính độ mờ để đặt độ mờ của hình ảnh này. Độ mờ được đặt thành 0. 2 để nền được làm trong suốt và văn bản ở trên cùng của hình ảnh hiển thị rõ ràng
Khi bạn thêm hình nền vào phần tử
Hello World from the Doge!
1, bạn có thể muốn thay đổi độ mờ của hình ảnh để nội dung của phần tử
Hello World from the Doge!
1 có thể nổi bật và dễ nhìn hơnVí dụ: giả sử bạn có phần thân HTML sau
Hello World from the Doge!
Và sau đó, bạn đặt quy tắc CSS sau cho lớp
Hello World from the Doge!
3 [hình ảnh được sử dụng cho ví dụ này được tải xuống từ Unsplash].bg-doge {
background-image: url[bg-doge.jpeg];
background-size: cover;
height: 600;
opacity: 0.4;
/* extra style to center the content */
/* you can remove them later */
display: flex;
align-items: center;
justify-content: center;
}
.color-white {
color: #fff;
background-color: #000;
}
Đầu ra của đoạn mã trên sẽ như sau
Hình nền có độ mờ
Như bạn có thể thấy, phần tử
Hello World from the Doge!
4 bên trong thẻ
Hello World from the Doge!
1 bị ảnh hưởng bởi thuộc tính
Hello World from the Doge!
6, khiến nó trở nên trong suốt giống như hình nềnĐiều này là do thuộc tính
Hello World from the Doge!
6 áp dụng cho mọi thứ bên trong phần tử vùng chứa. Bạn không thể làm cho phần tử con kém minh bạch hơn phần tử cha của nóĐể giải quyết vấn đề này, bạn cần đặt hình nền là con của thẻ
Hello World from the Doge!
1 bằng cách sử dụng bộ chọn phần tử giả .bg-doge {
background-image: url[bg-doge.jpeg];
background-size: cover;
height: 600;
opacity: 0.4;
/* extra style to center the content */
/* you can remove them later */
display: flex;
align-items: center;
justify-content: center;
}
.color-white {
color: #fff;
background-color: #000;
}
2Hãy xem cú pháp CSS sau
.bg-doge {
position: relative;
height: 600;
/* extra style to center the content */
display: flex;
align-items: center;
justify-content: center;
}
.bg-doge:before {
content: "";
background-image: url[bg-doge.jpeg];
position: absolute;
background-size: cover;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
opacity: .6;
}
Bộ chọn giả
.bg-doge {
background-image: url[bg-doge.jpeg];
background-size: cover;
height: 600;
opacity: 0.4;
/* extra style to center the content */
/* you can remove them later */
display: flex;
align-items: center;
justify-content: center;
}
.color-white {
color: #fff;
background-color: #000;
}
2 ở trên được sử dụng để tạo hình nền. Vị trí tuyệt đối và các giá trị trên, trái, dưới, phải được áp dụng sao cho phần tử giả có cùng kích thước với phần tử gốc của nó.bg-doge {
background-image: url[bg-doge.jpeg];
background-size: cover;
height: 600;
opacity: 0.4;
/* extra style to center the content */
/* you can remove them later */
display: flex;
align-items: center;
justify-content: center;
}
.color-white {
color: #fff;
background-color: #000;
}
4 của phần tử giả được đặt thành .bg-doge {
background-image: url[bg-doge.jpeg];
background-size: cover;
height: 600;
opacity: 0.4;
/* extra style to center the content */
/* you can remove them later */
display: flex;
align-items: center;
justify-content: center;
}
.color-white {
color: #fff;
background-color: #000;
}
5 để đặt nó ở cuối đơn hàng. Nếu không có thuộc tính .bg-doge {
background-image: url[bg-doge.jpeg];
background-size: cover;
height: 600;
opacity: 0.4;
/* extra style to center the content */
/* you can remove them later */
display: flex;
align-items: center;
justify-content: center;
}
.color-white {
color: #fff;
background-color: #000;
}
4, nó sẽ được đặt lên trên các phần tử khác, chặn nội dung khỏi chế độ xemCuối cùng, vị trí
.bg-doge {
background-image: url[bg-doge.jpeg];
background-size: cover;
height: 600;
opacity: 0.4;
/* extra style to center the content */
/* you can remove them later */
display: flex;
align-items: center;
justify-content: center;
}
.color-white {
color: #fff;
background-color: #000;
}
7 được đặt thành .bg-doge {
background-image: url[bg-doge.jpeg];
background-size: cover;
height: 600;
opacity: 0.4;
/* extra style to center the content */
/* you can remove them later */
display: flex;
align-items: center;
justify-content: center;
}
.color-white {
color: #fff;
background-color: #000;
}
8 để phần tử giả được chứa bên trong
Hello World from the Doge!
1Đầu ra sẽ như sau
Đã sửa độ mờ của hình nền bằng cách sử dụng phần tử giả
Giờ đây, độ trong suốt của hình nền sẽ không được áp dụng cho nội dung của thẻ
Hello World from the Doge!
1Ngoài ra, bạn cũng có thể đặt hình nền chỉ trong suốt khi con trỏ di chuột qua phần tử bằng cách sử dụng cú pháp CSS sau