Cách thêm hình nền CSS thú vị vào trang web của bạn

Sep 12, 2025

Cách

Thời gian là một nền trang web là một hình ảnh ốp nhỏ - và thường gớm ghiếc, tấn công mọi nhãn cầu của khách truy cập. Ngày nay, nền tạo thành nền tảng của thiết kế đồ họa trực tuyến nhiều.

Cuộc cách mạng này trong bối cảnh trên web đã được thúc đẩy bởi những tiến bộ trong CSS. Các tiêu chuẩn web hiện đủ khả năng kiểm soát nhiều hơn, để bạn có thể xác định cẩn thận vị trí của nền, hoạt động với độ dốc và thêm nhiều hình nền vào một phần tử duy nhất.

Bao gồm tất cả mọi thứ trong lĩnh vực này sẽ yêu cầu một cuốn sách, và vì vậy chúng tôi đã chọn một số điểm bắt đầu quan trọng để giúp bạn đi, và liên kết lựa chọn kỳ lạ để bạn khám phá thêm. Thưởng thức!

Thêm hình nền CSS vào các thành phần trang web

Nền CSS yêu cầu lý lịch Tài sản Shorthand hoặc sử dụng các thuộc tính cụ thể hơn, chẳng hạn như (nhưng không giới hạn ở): màu nền Được; hình nền Được; vị trí nền Được; Kích thước nền Được; Bối cảnh Lặp lại Được; và Tệp đính kèm nền . Chúng có thể được xác định cho nền của trang web (thông qua thân hình bộ chọn) hoặc các yếu tố trang như tiêu đề, div, v.v.

Ở cấp độ cơ bản nhất, bạn có thể sử dụng lý lịch Để biến một trang màu đỏ:

 cơ thể {
 Bối cảnh: Đỏ;
 }

Đi một chút tiên tiến hơn, bạn có thể thêm một hình ảnh trung tâm theo chiều ngang, 20px từ trên cùng của bộ chứa của nó, không được lặp lại và được sửa tại chỗ khi cuộn trang web:

 cơ thể {
 Bối cảnh: Trung tâm URL (Image.png) 20px Không lặp lại cố định;
 }

An image as a background (note: avoid this low level of contrast in your own designs) — Một hình ảnh như một nền (lưu ý: Tránh mức độ tương phản thấp này trong các thiết kế của riêng bạn)

Nếu bạn muốn viết nó ra mà không cần sử dụng lý lịch Shorthand, nó sẽ trông như thế này:

 cơ thể {
 Hình nền: URL (Image.png);
 Vị trí nền: Trung tâm 20px;
 Lặp lại nền tảng: Không lặp lại;
 Tệp đính kèm nền: Đã sửa lỗi;
 }

Nếu bạn muốn thêm nhiều hình nền vào một phần tử, bạn có thể các bộ giá trị riêng biệt trong khai báo CSS. Lưu ý rằng bất kỳ mục nào được chỉ định đầu tiên là trên cùng của ngăn xếp, có nghĩa là nó sẽ được hiển thị 'ở trên' nền khác.

 cơ thể {
 Bối cảnh: URL (Image.png) Trung tâm 20px Không lặp lại, URL (hình ảnh-2.png) Trung tâm trung tâm không lặp lại cố định;
 }

Trong trường hợp này, một hình ảnh xuất hiện theo ví dụ trước và một hình ảnh 'bên dưới' trực tiếp ở giữa khu vực nội dung.

Thay đổi kích thước hình nền

Cho đến nay, chúng tôi đã tránh Kích thước nền . Nhưng điều đó khá quan trọng, bởi vì nó cho phép bạn kiểm soát kích thước của một hình nền. Cụ thể, bạn có thể xác định kích thước ngang và dọc của hình ảnh tính bằng pixel hoặc tỷ lệ phần trăm, chẳng hạn như:

 Kích thước nền: 200px 50px;

Ngoài ra còn có hai giá trị từ khóa, có thể được sử dụng thay thế: Lưu trữ và che . Chúng có khả năng tương tự nhau, trong việc cung cấp một cách để chia tỷ lệ hình ảnh trong khu vực nội dung của một yếu tố. Sự khác biệt là Lưu trữ được thiết kế để tạo một hình ảnh càng lớn càng tốt, trong khi vẫn hiển thị tất cả trong khu vực nội dung (nghĩa là bạn thường nhận được khoảng trống xung quanh nó), trong khi che Bao gồm hoàn toàn khu vực nội dung, nhưng có thể dẫn đến một số hình ảnh không hiển thị. Loại thứ hai thường được sử dụng trên các trang web sử dụng ảnh làm hình nền.

CSS ‘contain’ (top) versus ‘cover’ (bottom) values — CSS 'chứa các giá trị' (trên cùng) so với 'che' (dưới cùng)

Lưu ý rằng bạn có thể thêm Kích thước nền đến A. lý lịch Định nghĩa tốc ký - Đặt nó sau vị trí nền giá trị, với dấu gạch chéo về phía trước hai:

 Nền: Trung tâm URL (Image.png) 20px / Chứa không lặp lại

Sử dụng hình nền Retina Resina cao

Khi thêm hình nền retina res cao, Kích thước nền cũng hữu ích để buộc các hình ảnh như vậy xuất hiện ở kích thước chính xác.

Ví dụ, hãy tưởng tượng một div. với một Tôi của Logo . Điều này, phù hợp, có một logo được áp dụng như một nền trong CSS. Đó là hình vuông 150 pixel, và vì vậy các CSS cơ bản bạn sử dụng là:

 #logo {
 Chiều rộng: 150px;
 Chiều cao: 150px;
 Bối cảnh: URL (logo.png) Không lặp lại;
 }

Độ phân giải cao làm phức tạp mọi thứ. Chúng tôi không muốn buộc phần cứng cũ hơn để tải hình ảnh lớn hơn và do đó, truy vấn phương tiện phải được sử dụng để tải logo độ phân giải cao hơn chỉ trên phần cứng được hỗ trợ.

 @media (-webkit-min-thiết bị-pixel-pixel-pixel: 2),
 (Độ phân giải tối thiểu: 192dpi) {
  #Logo {
   Hình nền: URL ([email protected]);
  Không thể
 }

Vấn đề bây giờ là hình ảnh độ phân giải cao @ 2x là 300 pixel vuông (vì nó có hai lần độ phân giải của bản gốc), nhưng được sử dụng làm nền cho một thùng chứa vuông 150 pixel. Vì vậy, tại thời điểm này, bạn chỉ thấy một phần tư của nó.

A high-res image before a resize fix — Một hình ảnh độ phân giải cao trước khi sửa chữa thay đổi kích thước

Điều này được cố định bằng cách gán một cụ thể Kích thước nền giá trị cho #Logo :

 #logo {
 Chiều rộng: 150px;
 Chiều cao: 150px;
 Bối cảnh: URL (logo.png) Không lặp lại;
 Kích thước nền: 150px 150px;
 }

Logo độ phân giải cao, bây giờ khít khè bên trong thùng chứa của nó

Một phương pháp hiện đại hơn để làm việc với nhiều độ phân giải nền và đạt được kết quả tương tự là CSS4 Bộ ảnh :

 #logo {
 Hình nền: Bộ hình ảnh (
  URL (logo.png) 1x,
  URL ([email protected]) 2x
  );
 }

Những lợi ích của Bộ ảnh CSS đơn giản hơn, và tác nhân người dùng xác định hình ảnh nên được sử dụng. Nhược điểm là hỗ trợ trình duyệt - tại thời điểm viết - vẫn chưa hoàn thành. Truy cập trang thử nghiệm này Để biết một phương tiện nhanh chóng để kiểm tra cách các trình duyệt bạn hỗ trợ giá vé. (Đây có lẽ là lý do tại sao nhiều nhà thiết kế Sử dụng các tập lệnh để tự động phục vụ hình ảnh cao độ phân giải .)

Làm việc với các kênh alpha và độ dốc

Mẹo cuối cùng của chúng tôi trong bài viết nhanh chóng (trong trang web Điều khoản hướng dẫn) liên quan đến các kênh alpha và độ dốc. Khi Internet được cung cấp năng lượng hơi nước, bạn thường có các nhà thiết kế sử dụng gifs 'Checkerboard' để mô phỏng các kênh alpha (mọi pixel khác đều trong suốt). Bây giờ, bạn chỉ cần gán màu trong RGBA:

 Main {
 Bối cảnh: RGBA (255,255,255,0.7);
 }

Trong ví dụ trên, nền sẽ là 70 phần trăm màu trắng, cho phép bất cứ điều gì bên dưới nó để hiển thị thông qua. Bạn cần cẩn thận để giữ rõ sự rõ ràng khi sử dụng các hình nền bán trong suốt nằm trên hình ảnh phức tạp, nhưng chúng có thể tuyệt vời để thêm sự quan tâm trực quan vào các trang web.

Alpha channels, gradients, and some questionable colour choices — Kênh alpha, độ dốc và một số lựa chọn màu đáng ngờ

Tương tự, các nhà thiết kế web được sử dụng để đầu ra và gif gạch nếu chúng muốn có một độ dốc như một nền tảng, nhưng điều đó không còn cần thiết nữa, trừ khi bạn muốn tiệc tùng như năm 1999. Những ngày này, bạn sẽ muốn CSS3 gradient tuyến tính và gradient xuyên tâm Các thuộc tính, mà bạn xác định hướng dẫn và điểm dừng màu.

Đây là một quy tắc CSS với một gradient cơ bản:

 H1 {
 Bối cảnh: Gradient tuyến tính (phải, RGBA (255,255,255,1), RGBA (255,255,255,0));
}

Điều này sẽ được áp dụng cho các tiêu đề cấp một, cho chúng một gradient tuyến tính đi từ trái sang phải, bắt đầu với màu trắng rắn và kết thúc trong màu trắng trong suốt.

Sử dụng các góc và nhiều điểm dừng màu, bạn có thể đi nhiều, xa hơn nhiều với độ dốc. Để thử nghiệm, hãy thử sử dụng giống như photoshop Máy phát gradient css. và kiểm tra đầu ra mã (được chú ý, ví dụ được liên kết thêm cú pháp cho các trình duyệt cũ hơn - chỉ cần lấy gradient tuyến tính dòng để sử dụng của riêng bạn).

As the CSS Patterns Gallery shows, you can do really fancy things with CSS gradients — Khi thư viện mô hình CSS hiển thị, bạn có thể thực hiện những điều thực sự ưa thích với độ dốc CSS

Nếu bạn thích kiểm tra những chuyên gia web dày dạn có thể làm gì với độ dốc và Kích thước nền , kiểm tra của Lea Verou Thư viện mẫu CSS3. . Ở đó, bạn sẽ tìm thấy vô số ví dụ trực tiếp sử dụng độ dốc CSS để tạo tất cả các loại mẫu nền ấn tượng nghiêm trọng.

Và, vâng, có một gợi ý về nơi chúng ta đến liên quan đến các cuộc tấn công nhãn cầu trong một số trong số họ.Nhưng như với tất cả mọi thứ khi nói đến nền web, chìa khóa là để đảm bảo những gì bạn thêm có liên quan trong bối cảnh thiết kế của bạn và - quan trọng nhất - nền tảng đó không phân tâm từ nội dung, hoặc khiến nó không đọc được.

Liên kết liên quan:

Hướng dẫn viết CSS tốt hơn
Tạo một bố cục đáp ứng với lưới CSS
Thủ thuật CSS để cách mạng hóa bố cục của bạn

Cách thêm hình nền CSS thú vị vào trang web của bạn

Thêm hình nền CSS vào các thành phần trang web

Thay đổi kích thước hình nền

Sử dụng hình nền Retina Resina cao

Làm việc với các kênh alpha và độ dốc

Cách - Các bài báo phổ biến nhất

Cách tải ảnh Instagram: Mọi thứ bạn cần biết

Tạo kết cấu với công cụ tem mẫu

Cách vẽ các số liệu thực tế hơn

Cách thiết lập chủ đề trang web với các biến CSS

Chiếu sáng tác phẩm 3D của bạn với đèn vòm

Cách bắt đầu với Sass

Tạo hoàng hôn giật gân trong Photoshop

Vẽ xương chính xác và cơ bắp

Thể loại