The CSS Podcast – 053: 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 các thay đổi có ý nghĩa, bao gồm cả việc cho phép nhiều nền.
Các lớp nền nằm xa người dùng nhất, được kết xuất phía sau nội dung của một hộp bắt đầu từ vùng padding-box
. Điều này cho phép lớp nền không bao giờ 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. Giá trị ban đầu của background-color
là transparent
, cho phép hiển thị nội dung của phần tử mẹ. Một màu hợp lệ được đặt trên lớp nền nằm phía sau các đối tượng khác được vẽ trên phần tử đó.
Hình nền
Trên 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 nội dung 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 chuyển màu.
Đặt hình nền bằng hàm CSS url
Nền chuyển màu CSS
Có một số hàm CSS độ dốc để cho phép bạn tạo hình nền khi truyền hai hoặc nhiều màu.
Bất kể bạn sử dụng hàm chuyển màu nào, hình ảnh thu được sẽ có kích thước nội tại để phù hợp với không gian có sẵn.
Bản minh hoạ 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 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 bản sao nhất có thể trong không gian có sẵn. Khi không gian có sẵn tăng lên, hình ảnh sẽ kéo giãn và sau khi kéo giãn một nửa chiều rộng ban đầu của hình ảnh, hình ảnh sẽ nén để thêm các thực thể 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 bản sao trong không gian có sẵn mà không cần cắt – tạo khoảng cách giữa các bản sao của hình ảnh nếu 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, với khoảng trắng được phân bổ đều giữa các hình ảnh.
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 sử dụng một giá trị, giá trị đó sẽ được áp dụng cho cả chế độ lặp theo chiều ngang và dọc.
Tính năng viết tắt cũng có các lựa chọn một từ thuận tiện để giúp bạn thể hiện rõ ý định của mình.
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 cho thấy các chức 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 đó 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à 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ù vị trí hình ảnh.
Giống như background-repeat
, thuộc tính background-position
cho phép bạn định vị 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, thông số đầu tiên tương ứng với trục hoành, còn thông 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 sẽ chuyển thành 50%
. Sau đây là ví dụ minh hoạ việc 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 biểu mẫu hai tham số và một tham số mặc định; thuộc tính background-position
cũng chấp nhận tối đa 4 tham số;
Khi sử dụng 3 hoặc 4 tham số, bạn phải đặt từ khoá top
, left
, right
hoặc bottom
trước độ dài hoặc tỷ lệ phần trăm CSS để trình duyệt tính toán được cạnh nào của hộp CSS sẽ bắt đầu độ dời.
Khi sử dụng 3 tham số, độ dài hoặc giá trị CSS có thể là tham số thứ hai hoặc thứ ba, còn 2 tham số còn lại là từ khoá; từ khoá tiếp theo sẽ được dùng để xác định cạnh mà độ dài hoặc giá trị CSS tương ứng với độ dời. Độ dời 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, hình ảnh sẽ được đặt ở đầu hộp, giá trị 20%
thể hiện độ dời 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 độ dời 20% từ đầ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á sẽ được ghép nối với 2 giá trị tương ứng với độ lệch so với nguồn gốc của từng từ khoá được chỉ định. Nếu background-position: bottom 20% right 30%
được áp dụng cho background-image, thì background-image 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 các giá trị CSS và 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 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ế) của hình nền.
Thuộc tính background-size
sử dụng các giá trị phần trăm và độ dài CSS 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 với việc 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.
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 cỡ dựa trên chiều rộng và chiều cao 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ủa kích thước được đặt thànhauto
sẽ được điều chỉnh theo nhu cầu để 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ó thể có nghĩa là hình ảnh được điều chỉnh theo tỷ lệ hoặc bị cắt.contain
: Điều chỉ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 khoảng trống khiến hình ảnh lặp lại, trừ phi bạn đặtbackground-repeat
thànhno-repeat
.
Hai phương thức sau được dùng độc lập mà không cần tham số nào khác.
Bản minh hoạ sau đây cho thấy 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 sửa đổi hành vi vị trí cố định của hình nền (hình ảnh thuộc một lớp nền) sau khi lớp đó hiển thị trên màn hình.
Phương thức 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 đó trong lớp nền được xác định bởi các giới hạn của hộp CSS.
Việc sử dụng giá trị fixed
sẽ cố định vị trí của hình nền vào 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 kết xuất) ra khỏi màn hình, hình ảnh trong lớp nền sẽ cố định ở vị trí ban đầu mà lớp nền cho phép 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 so với nội dung của phần tử. Hình nền hiện di chuyển dọc theo không gian mà hình nền chiếm giữ khi 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 cuộn, chuyển đổi 2D hoặc 3D).
Nguồn gốc của nề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 một hộp .
Hãy thử các tuỳ chọn này bằng cách sử dụng bản minh hoạ sau:
Đoạn video ở chế độ nền
Thuộc tính background-clip
kiểm soát nội dung hiển thị 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 vị trí có thể hiển thị lớp nền CSS. Khi sử dụng các từ khoá này, mọi kết xuất của nền vượt quá vùng được chỉ định sẽ bị cắt bớt hoặc 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 vượt quá văn bản trong hộp nội dung. Để hiệu ứng này xuất hiện rõ ràng trong văn bản thực tế trong hộp CSS, văn bản phải trong suốt một phần hoặc hoàn toàn.
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.
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 phủ 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, còn nền cuối cùng là nền 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 lẻ 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 đượ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 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;
Tóm tắt về nền
Để dễ dàng tạo kiểu cho lớp nền của một hộp (đặc biệt là khi bạn muốn có nhiều lớp nền), có một lối 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ự rất quan trọng trong dạng viết tắt để 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 tách bằng dấu gạch chéo (/
). Việc khai báo nguồn gốc và hành vi cắt 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 một lúc
Nội dung khai báo sau đây sẽ cắt nền và lấy nề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 ngữ nghĩa viết tắt này, bạn có thể viết lại các nội dung khai báo liên quan đến chế độ nền trước đó của đoạn mã 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
Kiểm tra kiến thức của bạn về Nền CSS
Hình nền được đặt ở phía trên cùng bên trái của hộp CSS.
Hình nền đượ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: 50% left
background-position: left
background-position: right bottom
background-position: top right 33%
Để đặt hình nền cố định trong một khung nhìn, bạn sử dụng:
background-attachment: fixed
background-position: fixed
background-fixed-to-viewport: true
background-attachment: scroll
background-origin mặc định của nền trong hộp CSS là:
padding-box
border-box
content-box
margin-box