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
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
Ở 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
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
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:
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ó 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.
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 á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
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; 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 đặ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ó 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 đặtbackground-repeat
thànhno-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
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
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
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.
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.
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.
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ể.
Thông tin khai báo background-position
nào sau đây là hợp lệ?
background-position: 50% left
background-position: top right 33%
background-position: right bottom
background-position: left
Để đặt hình nền cố định trong khung nhìn mà bạn sử dụng:
background-position: fixed
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
background-origin
, nhưng không phải là giá trị mặc định.
border-box
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
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
background-origin
.