Tạo hình ảnh trong suốt bằng thuộc tính Opacity CSS, cách sử dụng thuộc tính opacity, cách tạo hình ảnh trong suốt, cách tạo hình ảnh mờ ảo, cách tạo phần tử trong suốt, cách tạo phần tử mờ ảo
Tạo hình ảnh trong suốt bằng thuộc tính Opacity CSS, cách sử dụng thuộc tính opacity, cách tạo hình ảnh trong suốt, cách tạo hình ảnh mờ ảo, cách tạo phần tử trong suốt, cách tạo phần tử mờ ảo
Bình thường | Trong suốt | Bình thường | 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)
img { opacity: 0.5; } div { width:200px; height: 200px; background-color: green; opacity: 0.8; }
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
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
.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; }
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