Độ mờ / Độ trong suốt của CSS
Thuộc tính opacity
chỉ định độ mờ/độ trong suốt của một phần tử.
Hình ảnh trong suốt
Thuộc tính opacity
có thể nhận giá trị từ 0,0 - 1,0. Giá trị càng thấp thì càng minh bạch:
độ mờ 0,2
độ mờ 0,5
độ mờ 1
(mặc định)
Hiệu ứng di chuột trong suốt
Thuộc tính opacity
thường được sử dụng cùng với bộ chọn :hover
để thay đổi độ mờ khi di chuột qua:
Ví dụ giải thích
Khối CSS đầu tiên tương tự như mã trong Ví dụ 1. Ngoài ra, chúng tôi đã thêm những gì sẽ xảy ra khi người dùng di chuột qua một trong các hình ảnh. Trong trường hợp này, chúng tôi muốn hình ảnh KHÔNG trong suốt khi người dùng di chuột qua nó. CSS cho điều này là opacity:1;
.
Khi con trỏ chuột di chuyển ra khỏi ảnh, ảnh sẽ trong suốt trở lại.
Một ví dụ về hiệu ứng di chuột đảo ngược:
Hộp trong suốt
Khi sử dụng thuộc tính opacity
để thêm độ trong suốt cho nền của một phần tử, tất cả các phần tử con của nó đều kế thừa độ trong suốt như nhau. Điều này có thể làm cho văn bản bên trong phần tử hoàn toàn trong suốt khó đọc:
độ mờ 1
độ mờ 0,6
độ mờ 0,3
độ mờ 0,1
Độ trong suốt bằng RGBA
Nếu bạn không muốn áp dụng độ mờ cho các phần tử con, như trong ví dụ của chúng tôi ở trên, hãy sử dụng các giá trị màu RGBA . Ví dụ sau đây đặt độ mờ cho màu nền chứ không phải cho văn bản:
độ mờ 100%
độ mờ 60%
độ mờ 30%
độ mờ 10%
Bạn đã học được từ Chương Màu CSS của chúng tôi rằng bạn có thể 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 chỉ định độ mờ cho một màu.
Giá trị màu RGBA được chỉ định bằng: rgba(red, green, blue, alpha ). Tham số alpha là một số nằm trong khoảng từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn mờ).
Mẹo: Bạn sẽ tìm hiểu thêm về Màu RGBA trong Chương Màu CSS của chúng tôi.
Ví dụ
div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30%
opacity */
}
Hãy tự mình thử »Văn bản trong hộp trong suốt
Đây là một số văn bản được đặt trong hộp trong suốt.
Ví dụ
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
Hãy tự mình thử »Ví dụ giải thích
Đầu tiên, chúng ta tạo phần tử <div> (class="background") có hình nền và đường viền.
Sau đó, chúng ta tạo một <div> (class="transbox") khác bên trong <div> đầu tiên.
<div class="transbox"> có màu nền và đường viền - div trong suốt.
Bên trong <div> trong suốt, chúng ta thêm một số văn bản bên trong phần tử <p>.