Transparent Image
Thuộc tính opacity có thể có giá trị từ 0.0 - 1.0. Giá trị càng thấp, càng mờ:
opacity 0.2
opacity 0.5
opacity 1
(mặc định)
img { opacity: 0.5; }Transparent Hover Effect
Thuộc tính opacity thường được sử dụng cùng với :hover để thay đổi độ mờ khi di chuột qua.
img { opacity: 0.5; } img:hover { opacity: 1.0; }
Transparent Box
Khi sử dụng thuộc tính opacity để thêm độ trong suốt vào nền của một element, tất cả các element con của nó sẽ thừa hưởng cùng một độ trong suốt. Điều này có thể làm cho văn bản bên trong một element hoàn toàn trong suốt khó đọc:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
div { opacity: 0.3; }
Transparency sử dụng RGBA
Nếu bạn không muốn áp dụng độ mờ cho các element 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 đặt độ mờ cho màu nền chứ không phải cho văn bản:
100% opacity
60% opacity
30% opacity
10% opacity
div { background: rgba(76, 175, 80, 0.3) /* Màu nền xanh với 30% opacity */ }
Text in Transparent Box
Đây là một số văn bản bên trong transparent box.
<html> <head> <style> div.background { background: url(klematis.jpg) repeat; border: 2px solid black; } div.transbox { margin: 30px auto; 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à một số văn bản bên trong transparent box.</p> </div> </div> </body> </html>