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

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;
}

Tạo hình ảnh trong suốt khi bị dí chuột vào

Thử dí chuột vàoThử 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;
}

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àoThử 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;
}

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;
}

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

Tạo hình ảnh trong suốt bằng thuộc tính Opacity CSS

Click giùm một cái QUẢNG CÁO để hỗ trợ duy trì website, các bạn ơi