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ị 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 {
width: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

Học CSS