Hướng dẫn background-color trong suốt css

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ụ

1) Độ trong suốt của phần tử là gì !?

- Độ trong suốt của phần tử có thể tạm hiểu là khả năng mà chúng ta có thể nhìn "xuyên" qua phần tử đó.

- Độ trong suốt của phần tử càng lớn thì ta càng nhìn rõ được nội dung nằm ở bên dưới nó.

- Tôi có một tấm hình.

- Tôi đặt một phần tử #test (có nền màu đen) nằm đè lên tấm hình đó.

- Như các bạn đã thấy, mặc định thì phần tử #test không có độ trong suốt, cho nên chúng ta không thể thấy nào được nội dung nằm ở bên dưới nó.

- Bây giờ, các bạn hãy thử kéo thanh giá trị phía dưới để tăng độ trong suốt của phần tử #test lên, khi đó các bạn sẽ thấy được nội dung nằm ở bên dưới phần tử #test.

2) Cách chỉnh độ trong suốt cho một phần tử HTML

- Để chỉnh độ trong suốt cho một phần tử thì chúng ta cần phải thiết lập thuộc tính opacity cho phần tử đó với cú pháp như sau:

opacity: value;

- Trong đó, value có thể được xác định dựa theo một trong ba loại giá trị:

3) Cách chỉnh độ trong suốt cho phần tử bằng giá trị RGBA()

- Thông thường, khi chúng ta thiết lập thuộc tính opacity cho một phần tử thì mặc định các phần tử con nằm bên trong phần tử đó sẽ bị ảnh hưởng bởi độ trong suốt của nó.

- Phần tử #test bên dưới được thiết lập thuộc tính opacity với giá trị 0.3 (bên trong nó có phần tử con là một tấm hình, tấm hình này không được thiết lập thuộc tính opacity nhưng vẫn có độ trong suốt vì bị ảnh hưởng bởi độ trong suốt từ phần tử cha của nó là #test)

- Khi gặp phải những trường hợp giống ví dụ phía trên, nếu các bạn không muốn phần tử con bị ảnh hưởng bởi độ trong suốt từ phần tử cha của nó, thì thay vì thiết lập thuộc tính opacity, chúng ta còn một giải pháp khác đó chính là gán giá trị rgba() cho thuộc tính background-color của phần tử mà mình muốn chỉnh độ trong suốt.

Xem ví dụ

- Lưu ý: Để tìm hiểu cách xác định một giá trị rgba() thì các bạn vui lòng xem lại bài Màu sắc.