Nền

Đằng sau mỗi hộp CSS là một lớp chuyên biệt được gọi là lớp nền. CSS cung cấp nhiều cách để thực hiện những thay đổi có ý nghĩa đối với CSS đó, bao gồm cả việc cho phép nhiều nền.

Các lớp nền ở xa người dùng nhất, hiển thị phía sau nội dung của hộp, bắt đầu từ vùng padding-box. Điều này cho phép lớp nền không chồng chéo với đường viền.

Màu nền

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Cạnh: 12.
  • Firefox: 1.
  • Safari: 1.

Nguồn

Một trong những hiệu ứng đơn giản nhất mà bạn có thể áp dụng cho lớp nền là đặt màu sắc. Giá trị ban đầu của background-colortransparent, cho phép hiển thị nội dung của thành phần mẹ. Màu hợp lệ được đặt trên một lớp nền sẽ nằm phía sau những nội dung khác được vẽ trên phần tử đó.

Hình nền

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Cạnh: 12.
  • Firefox: 1.
  • Safari: 1.

Nguồn

Ở đầu lớp background-color, bạn có thể thêm hình nền bằng cách sử dụng thuộc tính background-image. background-image chấp nhận những điều kiện sau:

  • URL hình ảnh hoặc URI dữ liệu sử dụng hàm CSS url.
  • Hình ảnh được tạo động bằng hàm CSS độ dốc.

Đặt hình nền bằng hàm CSS url

Nền chuyển màu CSS

Một số hàm CSS gradient tồn tại để cho phép bạn tạo hình nền khi được chuyển hai màu trở lên.

Bất kể bạn sử dụng hàm chuyển màu nào, hình ảnh thu được đều có kích thước nội tại để phù hợp với không gian có sẵn.

Bản minh hoạ cho thấy ví dụ về cách áp dụng hình nền bằng các hàm chuyển màu:

Hình nền lặp lại

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Cạnh: 12.
  • Firefox: 1.
  • Safari: 1.

Nguồn

Theo mặc định, hình nền lặp lại theo chiều ngang và chiều dọc để lấp đầy toàn bộ không gian của lớp nền.

Thay đổi điều này bằng cách sử dụng thuộc tính background-repeat với một trong các giá trị sau:

  • repeat: Hình ảnh lặp lại trong không gian có sẵn, cắt khi cần thiết.
  • round: Hình ảnh lặp lại theo chiều ngang và chiều dọc để vừa với nhiều thực thể vào không gian có sẵn. Khi không gian có sẵn làm tăng độ giãn của hình ảnh và sau khi kéo dài một nửa chiều rộng ban đầu của hình ảnh, sẽ nén để thêm các phiên bản hình ảnh khác.
  • space: Hình ảnh lặp lại theo chiều ngang và chiều dọc để vừa với nhiều thực thể trong không gian có sẵn mà không bị cắt, giãn cách các bản sao của hình ảnh khi cần. Các hình ảnh lặp lại chạm vào các cạnh của không gian mà lớp nền chiếm giữ, với khoảng trắng được phân bổ đồng đều giữa chúng.

Thuộc tính background-repeat cho phép bạn thiết lập hành vi cho trục x và y một cách độc lập. Tham số đầu tiên đặt hành vi lặp lại theo chiều ngang và tham số thứ hai đặt hành vi lặp lại theo chiều dọc.

Nếu bạn dùng một giá trị duy nhất, giá trị đó sẽ được áp dụng cho cả lần lặp lại theo chiều ngang và chiều dọc.

Cách viết tắt này cũng có các lựa chọn tiện lợi gồm một từ để giúp ý định của bạn rõ ràng hơn.

Giá trị repeat-x chỉ lặp lại một hình ảnh theo chiều ngang; hàm này tương đương với repeat no-repeat.

Bản minh hoạ sau đây minh hoạ các khả năng này của thuộc tính background-repeat:

Vị trí nền

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Cạnh: 12.
  • Firefox: 1.
  • Safari: 1.

Nguồn

Bạn có thể nhận thấy khi một số hình ảnh trên web được tạo kiểu bằng phần khai báo background-repeat: no-repeat, những hình ảnh như vậy hiển thị trên cùng bên trái vùng chứa.

Vị trí ban đầu của hình nền là trên cùng bên trái. Thuộc tính background-position cho phép bạn thay đổi hành vi này bằng cách bù trừ vị trí hình ảnh.

Tương tự như background-repeat, thuộc tính background-position cho phép bạn đặt hình ảnh dọc theo trục x và y một cách độc lập với hai giá trị theo mặc định.

Khi sử dụng độ dài và tỷ lệ phần trăm CSS, tham số đầu tiên tương ứng với trục hoành trong khi tham số thứ hai tương ứng với trục tung.

Khi chỉ sử dụng từ khoá, thứ tự của từ khoá không quan trọng:

Nên
background-position: left 50%;
Nên
background-position: top left;
Nên
background-position: left top;

Thứ tự không quan trọng đối với từ khoá được liên kết với các trục vị trí khác nhau.

Không nên
  background-position: 50% left;

Khi các giá trị CSS được dùng cùng với từ khoá, thứ tự rất quan trọng. Giá trị đầu tiên đại diện cho trục hoành và giá trị thứ hai đại diện cho trục tung.

Không nên
  background-position: left right;

Bạn không thể sử dụng các từ khoá được liên kết với cùng một trục cùng một lúc.

Thuộc tính background-position cũng có một giá trị viết tắt thuận tiện; giá trị bị bỏ qua phân giải thành 50%. Sau đây là ví dụ minh hoạ điều này bằng cách sử dụng các từ khoá mà thuộc tính background-position chấp nhận:

Ngoài dạng hai thông số mặc định và một dạng thông số; thuộc tính background-position cũng chấp nhận tối đa 4 thông số;

Khi sử dụng 3 hoặc 4 thông số, độ dài hoặc tỷ lệ phần trăm của CSS phải đứng sau các từ khoá top, left, right hoặc bottom để trình duyệt tính toán cạnh nào của hộp CSS sẽ tạo ra phần bù trừ.

Khi sử dụng ba thông số, độ dài hoặc giá trị CSS có thể là thông số thứ hai hoặc thứ ba với hai thông số còn lại là từ khoá; từ khoá thành công sẽ được dùng để xác định cạnh mà độ dài hoặc giá trị của CSS tương ứng với độ lệch. Độ lệch của từ khoá khác được chỉ định được đặt thành 0.

Nên
background-position: bottom 88% right;
Nên
background-position: right bottom 88%;
Không nên
background-position: 88% bottom right;
Giá trị độ dài CSS phải đứng sau từ khóa top, right, bottom hoặc left khi sử dụng từ 3 thông số trở lên.
Nên
background-position: bottom 88% right 33%;
Nên
background-position: right 33% bottom 88%;
Không nên
background-position: 88% 33% bottom left;
Giá trị độ dài CSS phải đứng sau từ khóa top, right, bottom hoặc left khi sử dụng từ 3 thông số trở lên.

Nếu background-position: top left 20% được áp dụng cho hình nền CSS, thì hình ảnh đó sẽ được đặt ở đầu hộp, giá trị 20% thể hiện độ lệch 20% so với bên trái của hộp (trên trục x).

Nếu background-position: top 20% left được áp dụng cho hình nền CSS, thì giá trị 20% thể hiện mức chênh lệch 20% so với đầu hộp CSS (trên trục y) và hình ảnh được đặt ở bên trái hộp.

Khi sử dụng 4 tham số, 2 từ khoá đó được ghép với 2 giá trị tương ứng với giá trị bù trừ so với nguồn gốc của mỗi từ khoá được chỉ định. Nếu background-position: bottom 20% right 30% được áp dụng cho hình nền, hình nền được đặt cách 20% từ dưới cùng và 30% từ bên phải của hộp CSS.

Bản minh hoạ sau đây minh hoạ hành vi này:

Dưới đây là các ví dụ khác về cách sử dụng thuộc tính background-position bằng cách kết hợp CSS và giá trị từ khoá:

Kích thước nền

Hỗ trợ trình duyệt

  • Chrome: 3.
  • Cạnh: 12.
  • Firefox: 4.
  • Safari: 5.

Nguồn

Thuộc tính background-size đặt kích thước của hình nền; Theo mặc định, hình nền được định kích thước dựa trên chiều rộng, chiều cao và tỷ lệ khung hình nội tại (thực tế).

Thuộc tính background-size sử dụng độ dài CSS và giá trị phần trăm hoặc từ khoá cụ thể. Thuộc tính chấp nhận tối đa 2 thông số tương ứng để cho phép bạn thay đổi chiều rộng và chiều cao của nền một cách độc lập.

Tài sản background-size chấp nhận các từ khoá sau:

  • auto: Khi được sử dụng độc lập, hình nền sẽ được định kích thước dựa trên chiều rộng và chiều cao hàm nội tại; khi auto được sử dụng cùng với một giá trị CSS khác cho chiều rộng (tham số đầu tiên) hoặc chiều cao (tham số thứ hai), kích thước được đặt thành auto sẽ được định kích thước khi cần để duy trì tỷ lệ khung hình tự nhiên của hình ảnh. Đây là hành vi mặc định của thuộc tính background-size.
  • cover: Bao phủ toàn bộ khu vực của lớp nền. Điều này có nghĩa là hình ảnh bị kéo giãn hoặc bị cắt.
  • contain: Định kích thước hình ảnh để lấp đầy không gian mà không cần kéo giãn hoặc cắt. Do đó, có thể vẫn còn không gian trống khiến hình ảnh lặp lại, trừ phi bạn đặt background-repeat thành no-repeat.

2 ngôn ngữ sau được thiết kế để sử dụng theo cách độc lập mà không có thông số khác.

Bản minh hoạ sau đây minh hoạ cách hoạt động của các từ khoá này:

Bản minh hoạ cách áp dụng các từ khoá này cho background-size:

Tệp đính kèm ở chế độ nền

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Cạnh: 12.
  • Firefox: 1.
  • Safari: 1.

Nguồn

Thuộc tính background-attachment cho phép bạn chỉnh sửa hành vi vị trí cố định của hình nền (hình ảnh là một phần của lớp nền) khi lớp này hiển thị trên màn hình.

Hàm này chấp nhận 3 từ khoá: scroll, fixedlocal.

Hành vi mặc định của thuộc tính background-attachment là giá trị ban đầu của scroll. Khi cần thêm không gian, hình ảnh sẽ di chuyển theo không gian đó bên trong lớp nền được xác định theo các giới hạn của hộp CSS.

Việc sử dụng giá trị fixed sẽ sửa vị trí của hình nền thành khung nhìn.

Khi không gian của hình ảnh lớp nền ban đầu chiếm dụng cần phải được cuộn (hoặc hiển thị) ngoài màn hình, hình ảnh trong lớp nền sẽ vẫn cố định ở vị trí ban đầu mà lớp nền cho phép chúng hiển thị cho đến khi toàn bộ lớp được cuộn ra khỏi màn hình bằng khung nhìn.

Từ khoá local cho phép cố định vị trí của hình nền tương ứng với nội dung của phần tử. Hình nền bây giờ sẽ di chuyển dọc theo không gian mà chúng chiếm vì không gian đó hiển thị bên trong và bên ngoài giới hạn của hộp CSS (thường là do chuyển đổi cuộn, 2D hoặc 3D).

Nguồn gốc nền

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Cạnh: 12.
  • Firefox: 4.
  • Safari: 3.

Nguồn

Thuộc tính background-origin cho phép bạn chỉnh sửa khu vực nền liên kết với một hộp cụ thể. Các giá trị mà thuộc tính chấp nhận tương ứng với các khu vực border-box , padding-boxcontent-box của hộp .

Hãy thử các tuỳ chọn này bằng bản minh hoạ sau:

Đoạn video nền

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Cạnh: 12.
  • Firefox: 4.
  • Safari: 5.

Nguồn

Thuộc tính background-clip kiểm soát nội dung trực quan nhìn thấy qua lớp nền bất kể giới hạn do thuộc tính background-origin tạo.

Giống như background-origin, các khu vực có thể được chỉ định là border-box, padding-boxcontent-box tương ứng với vị trí có thể kết xuất lớp nền CSS. Khi các từ khoá này được sử dụng, mọi kết xuất nền xa hơn vùng đã chỉ định sẽ bị cắt hoặc bị cắt bớt.

Thuộc tính background-clip cũng chấp nhận từ khoá text cắt nền để không xa hơn văn bản trong hộp nội dung. Để tác động này thể hiện rõ trong văn bản thực tế trong hộp CSS, văn bản phải có một phần hoặc hoàn toàn trong suốt.

Tại thời điểm chúng tôi viết bài này, là một tài sản tương đối mới, Chrome và hầu hết các trình duyệt đều yêu cầu tiền tố -webkit- để sử dụng tài sản này.

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Cạnh: 12.
  • Firefox: 4.
  • Safari: 5.

Nguồn

Nhiều nền

Như đã đề cập ở đầu mô-đun, lớp nền cho phép xác định nhiều lớp con. Để ngắn gọn, tôi sẽ gọi các lớp con này là hình nền.

Nhiều nền được xác định từ trên xuống dưới; Nền đầu tiên gần người dùng nhất, còn nền cuối cùng ở xa người dùng nhất.

Nền duy nhất được xác định hoặc lớp cuối cùng được trình duyệt chỉ định là lớp nền cuối cùng. Chỉ lớp này mới được phép gán background-color.

Bạn có thể định cấu hình riêng nhiều lớp bằng hầu hết các thuộc tính CSS liên quan đến nền được phân tách bằng dấu phẩy, như minh hoạ trong đoạn mã và bản minh hoạ trực tiếp dưới đây.

background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
    url("https://assets.codepen.io/7518/blob.svg"),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
  background-size: contain, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 10% 50%, 0% 0%;
  background-origin: padding-box, border-box, content-box;

Viết tắt của nền

Để dễ dàng tạo kiểu cho lớp nền của hộp hơn, đặc biệt là khi muốn có nhiều lớp nền – bạn có thể viết tắt theo mẫu cụ thể sau đây:

background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?

Thứ tự có vai trò quan trọng trong việc khai báo nhiều nền. Bạn phải cung cấp cả giá trị vị trí và kích thước, phân cách bằng dấu gạch chéo (/). Việc khai báo nguồn gốc và hành vi của đoạn video theo đúng thứ tự cho phép bạn tận dụng việc đặt từ khoá hợp lệ cho cả hai cùng lúc

Nội dung khai báo sau đây cắt nền và bắt nguồn từ hộp nội dung:

background: url("https://assets.codepen.io/7518/blob.svg") 50%
      50% / contain no-repeat content-box;

Với những ngữ nghĩa viết tắt này, các khai báo liên quan đến nền trước của đoạn mã có thể được viết lại như sau:

background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về nền CSS

Hình nền được đặt ở trên cùng bên trái của hộp CSS.

Sai
Đúng

Hình nền không được lặp lại theo mặc định.

Đúng
Sai

Nội dung khai báo background-position nào sau đây là hợp lệ?

background-position: top right 33%
background-position: right bottom
background-position: 50% left
background-position: left

Để đặt hình nền là cố định trong khung nhìn, bạn sử dụng:

background-attachment: fixed
background-fixed-to-viewport: true
background-attachment: scroll
background-position: fixed

Nguồn gốc mặc định của nền trong hộp CSS là:

content-box
padding-box
margin-box
border-box