Một ngày nọ cách đây cũng đã 3 năm mình đang tìm hiểu về CSS. Vào một blog thấy có một hiệu ứng khá là hay. Đó là khi rê chuột lên bức ảnh thì tự nhiên hình ảnh đó bị mờ đi, bỏ ra thì lại bình thường. Mình chẳng biết nó là cái gì. Rồi cho tới một ngày mới biết đó là thuộc tính Opacity CSS.
Nếu như đang muốn tìm hiểu về Opacity trong CSS thì bài viết này sẽ dành riêng cho bạn. Sẽ giải thích giúp bạn hiểu được Opacity là gì và cách sử dụng như thế nào.
Nó cũng gần giống với cách dùng RGBA. Ví dụ background: rgba(51, 170, 51, .1). Nhưng mình xin phép viết chi tiết hơn trong bài viết khác.
Còn hôm nay chỉ dành cho Opacity mà thôi.
Định nghĩa:
Thuộc tính opacity dùng để thiết lập “độ trong suốt” của phần tử. Làm mờ ảnh và background trong CSS.
Hãy làm ví dụ sau:
<!DOCTYPE html>
<html>
<head>
<style>
body {padding: 100px;}
.box {
width: 150px;
height: 150px;
background: #eee;
position: relative;
}
.box-child {
width: 100px;
height: 100px;
background: green;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="box-child"></div>
</div>
</body>
</html>
Tiếp theo mình sẽ thêm Opacity: 0 cho box-child thì lúc này box-child đã biến mất hoàn toàn.
Rồi tiếp theo mình lại cho Opacity: 0.5 xem sao
Thằng box-child đã xuất hiện nhưng độ độ rõ không bằng hình ảnh đầu tiên.
Áp dụng Opacity cho hiệu ứng Hover.
(Trong bài viết này mình có nêu ra một vài hiệu ứng Hover ảnh bạn có thể tham khảo).
Cũng với ví dụ trên mình sẽ xóa cái Opacity đã thêm và thêm một đoạn CSS khác bên dưới
.box-child:hover {
opacity: 0.5;
}
Khi rê chuột qua box-child bạn sẽ thấy hiệu ứng mờ đi như mình đã nói ở đầu bài.
Kết luận: Qua bài viết về thuộc tính Opacity mình đã lấy ví dụ rất rõ ràng. Bạn hãy vừa học vừa thực hành bài tập nhé. Chúc bạn học CSS thật hiệu quả.
