Podcast CSS – 053: Bối cảnh
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
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-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 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
Ở đầ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
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
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:
background-position: left 50%;
background-position: top left;
background-position: left top;
background-position: 50% left;
background-position: left right;
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.
background-position: bottom 88% right;
background-position: right bottom 88%;
background-position: 88% bottom right;
background-position: bottom 88% right 33%;
background-position: right 33% bottom 88%;
background-position: 88% 33% bottom left;
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
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; khiauto
đượ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ànhauto
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ínhbackground-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 đặtbackground-repeat
thànhno-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
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
, 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 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
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-box
và content-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
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-box
và content-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.
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.
Hình nền không được lặp lại theo mặc định.
Nội dung khai báo background-position
nào sau đây là hợp lệ?
background-position: left
background-position: 50% left
background-position: top right 33%
background-position: right bottom
Để đặt hình nền là cố định trong khung nhìn, bạn sử dụng:
background-attachment: fixed
background-attachment: scroll
background-fixed-to-viewport: true
background-position: fixed
Nguồn gốc mặc định của nền trong hộp CSS là:
margin-box
border-box
content-box
padding-box