Phông nền CSS

Thuộc tính CSS nền được sử dụng để xác định hiệu ứng nền của phần tử.

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

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS background-color

background-color Thuộc tính xác định màu nền của phần tử.

Mô hình

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

body {
  background-color: lightblue;
}

Thử ngay

Thông qua CSS, màu thường được chỉ định bằng cách sau:

  • Tên màu hợp lệ - ví dụ "red"
  • Giá trị thập lục phân - ví dụ "#ff0000"
  • Giá trị RGB - ví dụ "rgb(255,0,0)"

Xin xem Giá trị màu CSSđể lấy danh sách đầy đủ các giá trị màu có thể.

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:

Mô hình

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

h1 {
  background-color: green;
}
div {
  background-color: lightblue;
}
p {
  background-color: yellow;
}

Thử ngay

Độ mờ / Độ trong suốt

Thuộc tính opacity xác định độ mờ/độ trong suốt của phần tử. Phạm vi giá trị là 0.0 - 1.0. Giá trị càng thấp, càng trong suốt:

opacity 1
opacity 0.6
opacity 0.3
opacity 0.1

Mô hình

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

Thử ngay

Lưu ý:Sử dụng opacity Khi thuộc tính opacity của phần tử được thêm độ mờ, tất cả các phần tử con của nó sẽ kế thừa độ mờ tương tự. Điều này có thể làm cho văn bản trong phần tử hoàn toàn trong suốt khó đọc.

Độ mờ RGBA

Nếu bạn không muốn áp dụng độ mờ cho các phần tử con, ví dụ như ví dụ trên, hãy sử dụng RGBA Giá trị màu. Ví dụ sau đây thiết lập màu nền thay vì độ mờ của văn bản:

100% độ mờ
60% độ mờ
30% độ trong suốt
10% độ trong suốt

Từ Màu sắc CSS Trong chương này, bạn đã học cách sử dụng RGB làm giá trị màu. Ngoài RGB, bạn có thể kết hợp giá trị màu RGB với alpha Kết hợp các kênh cùng nhau (RGBA) - Kênh này xác định độ trong suốt của màu.

Giá trị màu RGBA được chỉ định là: rgba(red, green, blue, alpha)。alpha Các tham số là số từ 0.0 (hoàn toàn trong suốt) đến 1.0 (không trong suốt) giữa.

Lưu ý:Bạn có thể trong Màu sắc CSS Trong chương này, bạn sẽ học thêm về màu RGBA.

Mô hình

div {
  background: rgba(0, 128, 0, 0.3) /* Màu xanh lá cây không mờ 30% */
}

Thử ngay