Thuộc tính ngắn gọn nền CSS

Thuộc tính ngắn gọn background của CSS

Nếu cần rút ngắn mã, bạn cũng có thể chỉ định tất cả các thuộc tính nền trong một thuộc tính. Nó được gọi là thuộc tính ngắn gọn.

thay vì viết như thế này:

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

bạn có thể sử dụng thuộc tính ngắn gọn background:

ví dụ

đặt thuộc tính nền trong một biểu thức ngắn gọn trong một dòng声明:

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

thử ngay

Khi sử dụng thuộc tính ngắn gọn, thứ tự các giá trị thuộc tính là:

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

nếu một giá trị thuộc tính bị thiếu thì không quan trọng, chỉ cần đặt các giá trị khác theo thứ tự này. Lưu ý rằng trong ví dụ trên, chúng tôi không sử dụng thuộc tính background-attachment vì nó không có giá trị.

tất cả các thuộc tính nền CSS

thuộc tính miêu tả
background đặt tất cả các thuộc tính nền trong một biểu thức ngắn gọn.
background-attachment đặt ảnh nền là cố định hay cuộn cùng với phần còn lại của trang.
background-clip định nghĩa khu vực vẽ nền.
background-color đặt màu nền cho phần tử.
background-image đặt ảnh nền cho phần tử.
background-origin định nghĩa nơi đặt ảnh nền.
background-position Đặt lại vị trí bắt đầu của ảnh nền.
background-repeat Đặt lại ảnh nền có lặp lại và cách lặp lại.
background-size Định nghĩa kích thước của ảnh nền.