18/08/2018, 11:08
Tạo hình ảnh trong suốt bằng thuộc tính Opacity CSS
Thuộc tính opacity dùng để tạo hiệu ứng trong suốt (mờ ảo) cho hình ảnh, phần tử,..... Bình thường Trong suốt Bình thường Trong suốt Tạo hình ảnh trong suốt Để tạo hình ảnh trong suốt, ta thiết lập thuộc tính opacity cho hình ảnh đó Giá trị ...
Thuộc tính opacity dùng để tạo hiệu ứng trong suốt (mờ ảo) cho hình ảnh, phần tử,.....
| Bình thường | Trong suốt | Bình thường | Trong suốt |
 |
|
Tạo hình ảnh trong suốt
Để tạo hình ảnh trong suốt, ta thiết lập thuộc tính opacity cho hình ảnh đó
Giá trị của thuộc tính opacity nằm trong khoảng từ 0.0 đến 1.0 (giá trị càng thấp thì độ trong suốt càng cao)
Ví dụ
img {
opacity: 0.5;
}
div {
awidth:200px;
height: 200px;
background-color: green;
opacity: 0.8;
}
Xem ví dụ
Tạo hình ảnh trong suốt khi bị dí chuột vào
| Thử dí chuột vào | Thử dí chuột vào |
|
Để tạo hình ảnh trong suốt khi bị dí chuột vào, ta thiết lập thuộc tính opacity cho hình ảnh đó khi nó ở trang thái hover
Ví dụ
img:hover{
opacity: 0.5;
}
div:hover{
opacity: 0.8;
}
Xem ví dụ
Loại bỏ hiệu ứng trong suốt của hình ảnh khi nó bị dí chuột vào
| Thử dí chuột vào | Thử dí chuột vào |
|
Để loại bỏ hiệu ứng trong suốt của hình ảnh khi nó bị dí chuột vào, ta thiết lập thuộc tính opacity với giá trị 1 cho hình ảnh đó khi nó ở trạng thái hover
Ví dụ
img:hover{
opacity: 1.0;
}
div:hover{
opacity: 1.0;
}
Xem ví dụ
Tạo phần tử trong suốt nằm trên hình nền
HƯỚNG DẪN HỌC LẬP TRÌNH WEB
Ví dụ
.background{
background-image:url('../public/home/img_demo/background01.jpg');
padding:50px;
}
.transbox{
font-size:25px;
text-align:center;
padding:20px;
background-color:#ddd;
opacity:0.7;
}
Xem ví dụ
Lưu ý: Nếu một phần tử được thiết lập thuộc tính opacity thì các phần tử nằm bên trong nó cũng bị ảnh hưởng bởi thuộc tính opacity
