CSS Backgrounds

Các thuộc tính CSS background được sử dụng để thêm các hiệu ứng nền cho các phần tử.

Trong các chương này, bạn sẽ học về các thuộc tính CSS background sau:

• background-image
• background-repeat
• background-attachment
• background-position
• background (thuộc tính viết nhanh)

CSS background-color

Thuộc tính background-color được sử dụng để chỉ định màu nền của một phần tử.

Ví dụ:

Màu nền của một trang được thiết lập như sau:

body {
    background-color: lightblue;
}

Với CSS, một màu sắc hầu hết thường được chỉ định bởi:

• một tên màu hợp lệ  - như "red"
• một giá trị HEX - như "#ff0000"
• một giá trị RGB - như "rgb(255,0,0)"

Hãy xem chương CSS Color Values để biết danh sách đầy đủ các giá trị màu có thể có.

Các phần tử khác

Bạn có thể thiết lập màu nền cho bất kỳ phần tử HTML nào:

Ví dụ:

Ở đây, các phần tử <h1>, <p>, và <div> sẽ có các màu nền khác nhau:

h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: yellow;
}

Opacity / Transparency

Thuộc tính opacity được sử dụng để chỉ định tính mờ đục/tính trong suốt của một phần tử HTML. Nó có thể nhận một giá trị từ 0.0 đến 1.0. Giá trị càng thấp, càng trong suốt:

Ví dụ:

div {
    background-color: green;
    opacity: 0.3;
}

Ghi chú: Khi sử dụng thuộc tính opacity để thêm tính trong suốt vào nền của một phần tử, tất cả các phần tử con của nó đều kế thừa cùng một tính trong suốt. Điều này có thể khiến cho đoạn văn bản bên trong một phần tử hoàn toàn trong suốt khó đọc.

Tính trong suốt sử dụng RGBA

Nếu như bạn không muốn áp dụng opacity cho các phần tử con, như trong ví dụ của chúng tôi ở trên, hãy sử dụng các giá trị màu RGBA. Ví dụ sau thiết lập tính mờ đục cho màu nền và không phải cho đoạn văn bản:

Bạn đã được học từ chương CSS Colors của chúng tôi,  rằng bạn có thể sử dụng RGB như là một giá trị màu. Ngoài RGB ra, bạn có thể sử dụng một giá trị màu RGB với một kênh alpha (RGBA) - kênh alpha này được sử dụng để chỉ định tính mờ đục cho một màu sắc.

Một giá trị màu RGBA được chỉ định bằng rgba(red, green, blue, alpha). Tham số alpha là một số có giá trị ở giữa 0.0 (hoàn toàn trong suốt) và 1.0 (hoàn toàn không trong suốt).

Mẹo: Bạn sẽ học thêm về các màu RGBA trong chương CSS Colors của chúng tôi.

Ví dụ:

div {
    background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}