Hướng dẫn dùng color transparent trong PHP

1) Thuộc tính background-color trong CSS

- Thuộc tính background-color dùng để thiết lập "màu nền" của phần tử HTML.

- Ví dụ:

Phần tử này được thiết lập nền màu vàng

- Lưu ý: Đối với một phần tử HTML, phần diện tích được thiết lập màu nền sẽ bao gồm các phần:

• border.
• padding.
• content.
• (không bao gồm phần margin)

2) Cách sử dụng thuộc tính background-color trong CSS

- Để sử dụng thuộc tính background-color, ta dùng cú pháp như sau:

background-color: color|transparent|initial|inherit;

- Trong đó, ta thấy giá trị của thuộc tính background-color có thể được xác định bởi một trong bốn loại:

- Ngoài ra, thuộc tính background-color cũng thường được dùng để chỉnh màu nền cho văn bản.

        
        
        
Tài liệu hướng dẫn học Lập Trình Web.
        
    

Xem ví dụ

• Trang chủ
• Hướng dẫn học
• Hướng dẫn học CSS3
• Color transparence

Color transparence là gì?

Color transparence là màu trong suốt, ví dụ như khi sử dụng background-color transparence thì background sẽ có độ trong suốt, và có thể thấy đối tượng bên dưới. Để tạo một màu có độ trong suốt như vậy ta cần khai báo hệ màu RGBA (red green blue alpha).

Cấu trúc

tag {
    color: rgba(n1, n2, n3, độ trong suốt);
    background-color: rgba(n1, n2, n3, độ trong suốt);
}

• Với n1, n2, n3 có giá trị từ 0 tới 255, tương ứng với màu đen tới trắng.
• Độ trong suốt: có giá trị từ 0 tới 1 (với 1 là không trong suốt).

Color transparence

HTML viết:

Nội dung text bên dưới
Color

CSS viết - khi chưa sử dụng transparence:

div {
    height: 140px;
    position: relative;
}
div .text {
    color: #000;
    font-size: 30px;
    font-weight: bold;
}
div .color {
    color: #7ACAFF;
    font-size: 80px;
    font-weight: bold;
    left: 0;
    position: absolute;
    top: -40px;
}

Hiển thị trình duyệt khi chưa có transparence:

Nội dung text bên dưới

Color

Ta thấy nội dung "Color" nằm bên trên và che đoạn text bên dưới, ta không thể thấy nội dung bên dưới được, bây giờ ta sẽ sử dụng color transparence để xem kết quả thay đổi như thế nào nhé:

CSS viết:

div .color {
    color: rgba(122, 202, 255, 0.7);
    font-size: 80px;
    font-weight: bold;
    left: 0;
    position: absolute;
    top: -40px;
}

Hiển thị trình duyệt:

Nội dung text bên dưới

Color

Ta thấy rõ kết quả khá ấn tượng với cách dùng đơn giản như trên, các giá trị 122, 202, 255 chính là hệ màu RGB của #7ACAFF, hệ màu này thường sử dụng tool để biết, chứ không có cách nhớ chi tiết được, các bạn có thể tham khảo thêm tại Công cụ tạo color Transparence.

Background transparence

Ta đã biết color transparence là gì, bây giờ ta sẽ làm background transparence tương tự để hiểu rõ hơn về transparence là gì, xét ví dụ sau:

HTML viết:

Nội dung text bên dưới
Background

CSS viết - khi chưa sử dụng transparence:

div {
    height: 140px;
    position: relative;
}
div .text {
    color: #000;
    font-size: 30px;
    font-weight: bold;
}
div .color {
    background-color: #C685FF;
    height: 100px;
    line-height: 100px;
    text-align: center;
    top: 0;
    width: 200px;
}

Hiển thị trình duyệt khi chưa có transparence:

Nội dung text bên dưới

Background

Ta thấy nội dung "Background" nằm bên trên và che đoạn text bên dưới, bây giờ ta sẽ sử dụng background với color transparence để xem kết quả thay đổi như thế nào nhé:

CSS viết:

div .color {
    background-color: rgba(198, 133, 255, 0.7);
    height: 100px;
    line-height: 100px;
    text-align: center;
    top: 0;
    width: 200px;
}

Hiển thị trình duyệt:

Nội dung text bên dưới

Background

Tới đây chắc ta đã biết cách sử dụng transparence là như thế nào rồi, việc lấy mã màu, các bạn có thể tham khảo thêm tại Công cụ tạo color Transparence.