Nền

Podcast CSS – 053: Thông tin khái quát

Nền

Phía 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 cho CSS, trong đó có việc cho phép nhiều nền.

Các lớp nền ở cách 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 giúp lớp nền hoàn toàn không chồng chéo lên đường viền.

Màu nền

Hỗ trợ trình duyệt

  • 1
  • 12
  • 1
  • 1

Nguồn

Một trong những hiệu ứng đơn giản nhất bạn có thể áp dụng cho lớp nền là đặt color. Giá trị ban đầu của background-color là transparent, 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 lớp nền sẽ nằm phía sau những màu khác được vẽ trên phần tử đó.

Hình nền

Hỗ trợ trình duyệt

  • 1
  • 12
  • 1
  • 1

Nguồn

Ở trên cùng của lớp background-color, bạn có thể thêm hình nền bằng thuộc tính background-image. background-image chấp nhận những nội dung sau:

  • Một URL hình ảnh hoặc URI dữ liệu dùng hàm CSS url.
  • Hình ảnh được tạo động bằng hàm CSS chuyển màu.

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

Nền chuyển màu CSS

Một số hàm gradient (chuyển màu) tồn tại để cho phép bạn tạo hình nền khi được chuyển từ 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 bản chất để 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 hàm chuyển màu:

Lặp lại hình nền

Hỗ trợ trình duyệt

  • 1
  • 12
  • 1
  • 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.

Bạn có thể 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 xén nếu cần.
  • 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ể nhất có thể vào không gian có sẵn. Khi không gian có sẵn sẽ tăng độ giãn của hình ảnh và sau khi kéo giãn một nửa chiều rộng ban đầu của hình ảnh, hãy nén để thêm nhiều phiên bản hình ảnh hơn.
  • space: Hình ảnh lặp lại theo chiều ngang và chiều dọc để vừa với nhiều đối tượng vào không gian có sẵn mà không cắt, giữ khoảng cách giữa các phiên bản của hình ảnh khi cần. 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 đặt 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 sử dụng một giá trị duy nhất, thì giá trị đó sẽ được áp dụng cho cả lần lặp lại theo chiều ngang và chiều dọc.

Tính năng viết tắt cũng có các tuỳ chọn một từ tiện lợi để giúp bạn rõ ràng hơn.

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

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

Vị trí nền

Hỗ trợ trình duyệt

  • 1
  • 12
  • 1
  • 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 này sẽ hiển thị ở trên cùng bên trái của vùng chứa.

Vị trí ban đầu của hình nền là phía 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 thông qua hai giá trị theo mặc định.

Khi sử dụng độ dài và 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 từ khoá chỉ được sử dụng theo thứ tự của các 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 những từ khoá liên quan đến 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 các từ khoá, thứ tự của các từ khoá này 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 đồng thời các từ khoá được liên kết với cùng một trục.

Thuộc tính background-position cũng có thể viết tắt một giá trị thuận tiện; giá trị bị bỏ qua sẽ được phân giải thành 50%. Dưới đâ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 mặc định hai tham số và một dạng tham số; thuộc tính background-position còn chấp nhận tối đa 4 tham số;

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

Khi ba tham số được sử dụng, một độ dài hoặc giá trị CSS có thể là tham số thứ hai hoặc thứ ba với hai tham 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ị CSS tương ứng với phần bù trừ. Độ 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ừ khoá top, right, bottom hoặc left khi sử dụng từ 3 tham 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ừ khoá top, right, bottom hoặc left khi sử dụng từ 3 tham số trở lên.

Nếu áp dụng background-position: top left 20% cho hình nền CSS, hình ảnh sẽ được đặt ở đầu hộp, giá trị 20% biểu thị độ 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, giá trị 20% biểu thị độ 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 4 tham số được sử dụng, 2 từ khoá này được ghép nối với hai giá trị tương ứng với phần 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 sẽ được đặt ở vị trí 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à một số 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

  • 3
  • 12
  • 4
  • 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 các từ khoá cụ thể. Thuộc tính này chấp nhận tối đa hai tham số tương ứng để bạn có thể thay đổi chiều rộng và chiều cao của nền một cách độc lập.

Thuộc tính background-size chấp nhận các từ khoá sau:

  • auto: Khi được sử dụng độc lập, hình nền được định kích thước dựa trên chiều rộng và chiều cao 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 đặ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ó thể khiến 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 kéo giãn hoặc cắt xén. Do đó, không gian trống vẫn có thể khiến hình ảnh lặp lại, trừ phi bạn đặt background-repeat thành no-repeat.

2 thuộc tính sau được dùng theo cách độc lập mà không cần có tham số khác.

Bản minh hoạ sau đây minh hoạ những từ khoá này trong thực tế:

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

Tệp đính kèm dưới nền

Hỗ trợ trình duyệt

  • 1
  • 12
  • 1
  • 1

Nguồn

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

Nguồn cấp dữ liệu này chấp nhận 3 từ khoá: scroll, fixed và local.

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 cùng với không gian đó trong lớp nền được xác định bởi các ranh giới của hộp CSS.

Sử dụng giá trị fixed sẽ cố định vị trí của hình nền cho khung nhìn.

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

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 giờ đây sẽ di chuyển dọc theo không gian của chúng 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 hành động cuộn, biến đổi 2D hoặc 3D).

Nguồn gốc của nền

Hỗ trợ trình duyệt

  • 1
  • 12
  • 4
  • 3

Nguồn

Thuộc tính background-origin cho phép bạn sửa đổi vùng 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 vùng border-box, padding-box và content-box của hộp .

Hãy thử các cách này qua bản minh hoạ sau đây:

Đoạn video trong nền

Hỗ trợ trình duyệt

  • 1
  • 12
  • 4
  • 5

Nguồn

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

Giống như background-origin, các vùng có thể được chỉ định là border-box, padding-box và content-box tương ứng với nơi có thể kết xuất lớp nền CSS. Khi các từ khoá này được sử dụng, mọi phần hiển thị nền nằm ngoài 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 quá văn bản trong hộp nội dung. Để hiệu ứng này thấy 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 toàn bộ trong suốt.

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

Hỗ trợ trình duyệt

  • 1
  • 12
  • 4
  • 5

Nguồn

Nhiều nền

Như đã đề cập ở phần đầu của mô-đun, lớp nền cho phép xác định nhiều lớp con. Tóm lại, tôi sẽ gọi các lớp con này là nền.

Nhiều nền được xác định từ trên xuống dưới; Nền đầu tiên là nền gần người dùng nhất, trong khi nền cuối cùng cách người dùng xa 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ớ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 cách sử dụng hầu hết các thuộc tính CSS liên quan đến nền và được phân tách bằng dấu phẩy, như được minh hoạ trong đoạn mã và bản minh hoạ trực tiếp bên dưới.

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 phông nền

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

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

Thứ tự là yếu tố quan trọng trong dạng viết tắt của 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 hành vi 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 các từ khoá có hiệu lực cho cả hai cùng một lúc

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

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

Với các ngữ nghĩa viết tắt này, nội dung khai báo liên quan đến nền trước đó của đoạn mã có thể được viết lại thành 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 mức độ hiểu biết của bạn

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.

Đúng
Chính xác!
Sai
Tuỳ thuộc vào kích thước nội tại của nó, một hình ảnh có thể dường như không được đặt ở góc trên cùng bên trái của hộp CSS, bạn cần phải sử dụng background-position một cách rõ ràng để thay đổi vị trí mặc định của hình nền.

Theo mặc định, hình nền không được lặp lại.

Sai
Bạn phải sử dụng background-repeat: no-repeat rõ ràng để không lặp lại hình nền. Ngoài ra, bạn có thể dùng background-repeat: repeat-x và background-repeat: repeat-y để tránh lặp lại trên trục cụ thể.
Đúng
Chính xác!

Thông tin khai báo background-position nào sau đây là hợp lệ?

background-position: 50% left
Khi giá trị CSS được dùng với từ khoá, thứ tự của các giá trị rất quan trọng.
background-position: top right 33%
Thao tác này sẽ đặt hình nền lên trên cùng của hộp và cách cạnh phải của hộp 33%.
background-position: right bottom
Thao tác này sẽ đặt hình nền vào vị trí rất bên phải và dưới cùng của hộp. Bạn có thể đặt tên cho vị trí của các trục khác nhau theo thứ tự bất kỳ.
background-position: left
Thao tác này sẽ đặt hình nền vào bên trái hộp và căn giữa theo chiều dọc. Khi chỉ cung cấp một vị trí của một trục, hình nền sẽ được căn giữa ở trục đối diện.

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

background-position: fixed
"Đây là giá trị không hợp lệ cho thuộc tính background-position."
background-fixed-to-viewport: true
background-fixed-to-viewport chưa tồn tại trong CSS.
background-attachment: fixed
background-attachment: fixed đặt rõ ràng hình nền là cố định trong khung nhìn hiện tại.
background-attachment: scroll
"background-attachment là thuộc tính cần sử dụng để đặt hình nền cố định trong khung nhìn. Tuy nhiên, scroll là giá trị mặc định cho thuộc tính cố định hình nền theo mặc định cho hộp không bị nội dung trong hộp ảnh hưởng."

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

content-box
Giá trị hợp lệ cho background-origin, nhưng không phải là giá trị mặc định.
border-box
Giá trị hợp lệ cho background-origin và các đường viền được sắp xếp trước có thể được vẽ trên nền, nhưng đây không phải là giá trị mặc định.
padding-box
Giá trị mặc định của background-origin. Cho phép kết xuất nền bên ngoài nội dung và lên đến đường viền của hộp.
margin-box
Mặc dù là một khu vực được nhận dạng trong hộp CSS, nhưng đó là giá trị không hợp lệ cho thuộc tính background-origin.