CSS

Các hướng dẫn cơ bản

Tìm hiểu nâng cao

HTML CSS JavaScript jQuery MySQL PHP

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

Bài trước

Bài kế tiếp

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

Bài trước

Bài kế tiếp