Bài 28: Thuộc tính Opacity / Transparency trong CSS
Thuộc tính opacity chỉ định độ mờ đục / trong suốt của một phần tử.
Nội dung
Độ trong suốt của hình ảnh (Transparent Image)
Thuộc tính opacity có thể được thiết lập giá trị từ 0.0 – 1.0. Với giá trị càng nhỉ thì độ trong suốt càng nhiều:
img {
opacity: 0.5;
}
Hiệu ứng trong suốt khi di chuột (Transparent Hover Effect)
Thuộc tính opacity thường được sử dụng cùng với bộ chọn :hover để thay đổi độ trong suốt của hình ảnh khi di chuyển chuột vào:
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
Giải thích ví dụ
Khối CSS đầu tiên tương tự như mã trong Ví dụ 1. Ngoài ra, chúng ta 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 ta 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 hình ảnh, hình ảnh sẽ trong suốt trở lại.
Một ví dụ về hiệu ứng di chuột đảo ngược:
img:hover {
opacity: 0.5;
}
Hộp trong suốt (Transparent Box)
Khi sử dụng thuộc tính opacity để thêm độ trong suốt tới nền của phần tử, tất cả các phần tử con thừa kế độ trong suốt như nhau. Điều này có thể làm cho văn bản trong phần tử có độ mờ cao sẽ khó đọc:
div {
opacity: 0.3;
}
Độ trong suốt sử dụng RGBA
Nếu bạn không muốn áp dụng độ mờ đục cho các phần tử con, như trong ví dụ ở trên, sử dụng các giá trị màu RGBA. Ví dụ sau thiết lập độ mờ cho màu nền chứ không phải văn bản:
Ngoài RGB, CSS3 giới thiệu giá trị màu RGB với kênh alpha (RGBA) – xác định độ mờ của màu. Giá trị màu RGBA được chỉ định bằng: rgba (đỏ, xanh, xanh, alpha). Thông số alpha là một số giữa 0,0 (hoàn toàn trong suốt) và 1,0 (đục hoàn toàn).
div {
background: rgba(76, 175, 80, 0.3) /* Nền xanh với 30% opacity */
}
Văn bản ở trong hộp trong suốt (Text in Transparent Box)
<html>
<head>
<style>
div.background {
background: url("https://timoday.edu.vn/wp-content/uploads/2021/04/img_mountains.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>Đây là văn bản nằm trong hộp trong suốt.</p>
</div>
</div>
</body>
</html>
Giải thích ví dụ
Đầu tiên, chúng ta tạo phần tử <div> (class = “background”) với 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>.
