Độ mờ/in suốt CSS
- Trang trước pseudo-element CSS
- Trang tiếp theo Thanh điều hướng CSS
độ mờ thuộc tính xác định độ mờ/độ trong suốt của phần tử.
hình ảnh mờ
độ mờ Giá trị của thuộc tính opacity nằm trong khoảng 0.0-1.0. Giá trị thấp hơn, độ mờ cao hơn:
opacity 0.2
opacity 0.5
độ mờ 1
Ví dụ
img {
độ mờ: 0.5;
}
hiệu ứng mờ di chuột
độ mờ thường được sử dụng cùng với :hover kết hợp với bộ lọc để thay đổi độ mờ khi di chuột qua:
Ví dụ
img {
độ mờ: 0.5;
}
img:hover {
opacity: 1.0;
}
Giải thích ví dụ
Mục CSS đầu tiên tương tự như mã trong ví dụ 1. Ngoài ra, chúng tôi còn thêm hiệu ứng khi người dùng di chuột qua một trong những hình ảnh đó. Trong trường hợp này, khi người dùng di chuột qua hình ảnh, chúng tôi muốn hình ảnh không mờ. Mã CSS này là độ mờ:1;.
Khi con trỏ chuột rời khỏi hình ảnh, hình ảnh sẽ trở lại trong suốt.
Ví dụ về hiệu ứng ngược khi hover:
Ví dụ
img:hover {
độ mờ: 0.5;
}
hộp trong suốt
Sử dụng độ mờ Khi thuộc tính độ mờ của một phần tử được thêm độ mờ, tất cả các phần tử con của nó sẽ kế thừa độ mờ đó. Điều này có thể làm cho văn bản trong phần tử hoàn toàn trong suốt khó đọc:
Ví dụ
div {
độ mờ: 0.3;
}
Sử dụng độ mờ RGBA
Nếu bạn không muốn áp dụng độ mờ cho các phần tử con, như ví dụ trên, hãy sử dụng giá trị màu RGBA. Ví dụ sau thiết lập màu nền thay vì độ mờ văn bản:
Bạn đã học từ Màu CSS Chapters này chúng ta đã học thêm về cách sử dụng RGB làm giá trị màu. Ngoài RGB, bạn có thể sử dụng giá trị màu RGB với kênh alpha (RGBA) - kênh này quy định độ mờ của màu.
Giá trị màu RGBA được chỉ định là: rgba(vàng, đỏ, xanh, alpha)。 alpha Các tham số là số từ 0.0 (hoàn toàn trong suốt) đến 1.0 (hoàn toàn không trong suốt).
Lưu ý:Bạn sẽ học thêm trong Màu CSS Chapters này chúng ta sẽ học thêm về màu RGBA.
Ví dụ
div {
nền: rgba(76, 175, 80, 0.3) /* Độ mờ 30% nền xanh */
}
Văn bản trong hộp trong suốt
Đây là một đoạn văn bản nằm trong hộp trong suốt.
Ví dụ
<html>
<head>
<style>
div.background {
nền: url(klematis.jpg) lặp lại;
vạch: 2px solid black;
}
div.transbox {
khoảng cách: 30px;
màu nền: #ffffff;
vạch: 1px solid black;
độ mờ: 0.6;
}
div.transbox p {
khoảng cách: 5%;
cỡ chữ: đậm;
màu: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>Đây là một số văn bản nằm trong khung trong suốt.</p>
</div>
</div>
</body>
</html>
Giải thích ví dụ
Trước tiên, chúng ta tạo một phần tử div có ảnh nền và viền (class="background").
Sau đó, chúng ta tạo một div khác trong div đầu tiên (class="transbox").
div class="transbox" có màu nền và viền - div này là trong suốt.
Trong div trong suốt, chúng ta thêm một số văn bản trong phần tử <p>.
- Trang trước pseudo-element CSS
- Trang tiếp theo Thanh điều hướng CSS
