Nền - Thủ thuật CSS | CSS Almanac 2025

Các backgroundbất động sản trong CSS cho phép bạn kiểm soát nền tảng của bất kỳ yếu tố (những gì sơn bên dưới nội dung trong phần tử đó). Nó là một thuộc tính viết tắt, có nghĩa là nó cho phép bạn viết nhiều thuộc tính CSS trong một. Như thế này:

body ( background: url(sweettexture.jpg.webp) /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ red; /* color */ )

background được tạo thành từ tám thuộc tính khác:

background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color

Bạn có thể sử dụng bất kỳ sự kết hợp nào của các thuộc tính này mà bạn thích, theo hầu hết mọi thứ tự (mặc dù thứ tự được đề xuất trong thông số kỹ thuật ở trên). Mặc dù vậy, có một lỗi: bất kỳ thứ gì bạn không chỉ định trong thuộc backgroundtính sẽ tự động được đặt thành mặc định. Vì vậy, nếu bạn làm điều gì đó như thế này:

body ( background-color: red; background: url(sweettexture.jpg.webp); )

Nền sẽ trong suốt, thay vì màu đỏ. Mặc dù vậy, cách khắc phục rất dễ dàng: chỉ cần xác định background-colorsau backgroundhoặc chỉ sử dụng tốc ký (ví dụ background: url(… ) red;)

Nhiều nền

CSS3 đã thêm hỗ trợ cho nhiều nền, lớp này chồng lên nhau. Bất kỳ thuộc tính nào liên quan đến nền đều có thể có một danh sách được phân tách bằng dấu phẩy, như sau:

body ( background: url(sweettexture.jpg.webp), url(texture2.jpg.webp) black; background-repeat: repeat-x, no-repeat; )

Mỗi giá trị trong danh sách được phân tách bằng dấu phẩy tương ứng với một lớp: giá trị đầu tiên là lớp trên cùng, giá trị thứ hai là lớp thứ hai và màu nền luôn là lớp cuối cùng.

Công thức nấu ăn

Xem Pen emBzRd của Timothy Miller (@tjacobdesign) trên CodePen.

Hỗ trợ trình duyệt

Hỗ trợ khác nhau giữa các thuộc tính cụ thể khác nhau và mỗi bài viết tương ứng trong Almanac có các ghi chú hỗ trợ trình duyệt duy nhất. Tuy nhiên, nền đơn màu cơ bản và hình ảnh đơn lẻ hoạt động ở mọi nơi và bất kỳ thứ gì không được hỗ trợ chỉ trở lại điều tốt nhất tiếp theo, cho dù đó là hình ảnh hay màu sắc.