Nền và đường viền

Màu nền

Thuộc tính background-color xác định màu nền trên bất kỳ phần tử nào trong CSS. Thuộc tính chấp nhận bất kỳ <color> hợp lệ nào. background-color mở rộng xuống bên dưới hộp nội dung và hộp phần đệm của phần tử.

Trong ví dụ bên dưới, chúng ta đã sử dụng các giá trị màu khác nhau để thêm màu nền cho hộp, tiêu đề và phần tử <span>.

Hãy thử chỉnh sửa ví dụ và hoán đổi các màu được chỉ định với bất kỳ giá trị <color> nào có sẵn.

<div class="box">
  <h2>Background Colors</h2>
  <p>Try changing the background <span>colors</span>.</p>
</div>

.box {
  padding: 0.3em;
  background-color: #567895;
}

h2 {
  background-color: black;
  color: white;
}
span {
  background-color: rgb(255 255 255 / 50%);
}

Hình ảnh nền

Thuộc tính background-image cho phép hiển thị hình ảnh ở nền của phần tử. Trong ví dụ bên dưới, chúng ta có hai hộp — một hộp có hình ảnh nền lớn hơn hộp (balloons.jpg). Hộp kia có hình ảnh nhỏ của một ngôi sao duy nhất (star.png).

Ví dụ này minh họa hai điều về hình ảnh nền. Theo mặc định, hình ảnh lớn không được thu nhỏ để vừa với hộp, vì vậy chúng ta chỉ thấy một góc nhỏ của nó, trong khi hình ảnh nhỏ được lát để lấp đầy hộp.

<div class="wrapper">
  <div class="box a"></div>
  <div class="box b"></div>
</div>

.wrapper {
  display: flex;
}

.box {
  width: 200px;
  height: 80px;
  padding: 0.5em;
  border: 1px solid #cccccc;
  margin: 20px;
}

.a {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/balloons.jpg");
}

.b {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/star.png");
}

Nếu bạn chỉ định màu nền ngoài hình ảnh nền thì hình ảnh sẽ hiển thị trên màu. Hãy thử thêm thuộc tính background-color vào ví dụ trên để xem điều đó hoạt động như thế nào.

Kiểm soát background-repeat

Thuộc tính background-repeat được sử dụng để kiểm soát hành vi lát của hình ảnh. Các giá trị có sẵn là:

• no-repeat — ngừng lặp lại nền hoàn toàn.
• repeat-x — lặp lại theo chiều ngang.
• repeat-y — lặp lại theo chiều dọc.
• repeat — mặc định; lặp lại theo cả hai hướng.
• space — lặp lại nhiều lần nhất có thể, thêm khoảng cách giữa các hình ảnh nếu có thêm khoảng cách.
• round — tương tự như space, nhưng kéo giãn hình ảnh để lấp đầy bất kỳ khoảng cách thêm nào

Hãy thử các giá trị này trong ví dụ bên dưới. Chúng ta đã đặt giá trị thành no-repeat vì vậy bạn chỉ thấy một ngôi sao. Hãy thử các giá trị khác nhau để xem hiệu ứng của chúng là gì.

<div class="box"></div>

.box {
  width: 200px;
  height: 80px;
  padding: 0.5em;
  border: 1px solid #cccccc;
  margin: 20px;
}

.box {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/star.png");
  background-repeat: no-repeat;
}

Kích thước hình ảnh nền

Hình ảnh balloons.jpg được sử dụng trong ví dụ hình ảnh nền ban đầu là hình ảnh lớn đã bị cắt do lớn hơn phần tử mà nó làm nền. Trong trường hợp này, chúng ta có thể sử dụng thuộc tính background-size để kích thước hình ảnh vừa với nền.

background-size có thể nhận hai giá trị <length> hoặc <percentage> để chỉ định kích thước hình ảnh theo hướng ngang và dọc, hoặc các từ khóa sau:

• cover — trình duyệt sẽ làm cho hình ảnh đủ lớn để nó hoàn toàn bao phủ khu vực hộp trong khi vẫn giữ nguyên aspect ratio của nó. Trong trường hợp này, một phần của hình ảnh có thể nằm bên ngoài hộp.
• contain — trình duyệt sẽ làm cho hình ảnh có kích thước phù hợp để vừa với hộp. Trong trường hợp này, bạn có thể có khoảng trống ở hai bên hoặc trên và dưới hình ảnh, nếu tỷ lệ khung hình của hình ảnh khác với tỷ lệ khung hình của hộp.

Thử nghiệm với background-size

Trong ví dụ bên dưới, hình ảnh balloons.jpg có các đơn vị độ dài được đặt để vừa với hộp. Bạn có thể thấy điều này đã làm biến dạng hình ảnh.

Hãy thử những điều sau:

• Thay đổi các đơn vị độ dài được sử dụng để sửa đổi kích thước nền.
• Xóa các đơn vị độ dài và xem điều gì xảy ra khi bạn sử dụng background-size: cover hoặc background-size: contain.
• Kích thước hình ảnh nhỏ hơn hộp, sau đó thay đổi giá trị của background-repeat để lặp lại hình ảnh.

<div class="box"></div>

.box {
  width: 500px;
  height: 100px;
  padding: 0.5em;
  border: 1px solid #cccccc;
  margin: 10px;
}

.box {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/balloons.jpg");
  background-repeat: no-repeat;
  background-size: 80px 10em;
}

Định vị hình ảnh nền

Thuộc tính background-position cho phép bạn chọn vị trí hình ảnh nền xuất hiện trên hộp mà nó được áp dụng. Điều này sử dụng hệ tọa độ trong đó góc trên bên trái của hộp là (0,0), và hộp được định vị dọc theo trục ngang (x) và dọc (y).

Các giá trị background-position phổ biến nhất nhận hai giá trị riêng lẻ — giá trị ngang theo sau là giá trị dọc. Bạn có thể sử dụng các từ khóa như top và right (tra cứu các từ khóa khác trên trang background-position):

.box {
  background-image: url("image.png");
  background-repeat: no-repeat;
  background-position: top center;
}

Bạn cũng có thể sử dụng độ dài và phần trăm:

.box {
  background-image: url("image.png");
  background-repeat: no-repeat;
  background-position: 20px 10%;
}

Bạn cũng có thể kết hợp các giá trị từ khóa với độ dài hoặc phần trăm, trong trường hợp đó giá trị đầu tiên đề cập đến vị trí ngang và giá trị thứ hai đề cập đến vị trí dọc. Ví dụ:

.box {
  background-image: url("image.png");
  background-repeat: no-repeat;
  background-position: 20px top;
}

Cuối cùng, bạn cũng có thể sử dụng cú pháp 4 giá trị để chỉ ra khoảng cách từ các cạnh nhất định của hộp. Mỗi cặp giá trị đại diện cho cạnh của hộp để bù từ, và kích thước của khoảng bù từ cạnh đó. Trong đoạn mã bên dưới, chúng ta đang định vị nền 20px từ top và 10px từ right:

.box {
  background-image: url("image.png");
  background-repeat: no-repeat;
  background-position: top 20px right 10px;
}

Thử nghiệm với background-position

Sử dụng ví dụ bên dưới để thử nghiệm với các giá trị này và di chuyển ngôi sao bên trong hộp:

<div class="box"></div>

.box {
  width: 500px;
  height: 80px;
  padding: 0.5em;
  border: 1px solid #cccccc;
  margin: 20px;
}

.box {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/star.png");
  background-repeat: no-repeat;
  background-position: 120px 1em;
}

Nền gradient

Một gradient — khi được sử dụng cho nền — hoạt động giống như hình ảnh và cũng được đặt bằng thuộc tính background-image.

Bạn có thể tìm hiểu về các loại giá trị gradient khác nhau và những gì bạn có thể làm với chúng trên trang MDN cho kiểu dữ liệu <gradient>.

Hãy thử một số giá trị gradient khác nhau trong ví dụ bên dưới. Ban đầu, chúng ta có một gradient tuyến tính được kéo dài trên toàn bộ hộp đầu tiên, và một gradient hướng tâm với kích thước được đặt, lặp lại trên hộp thứ hai.

<div class="wrapper">
  <div class="box a"></div>
  <div class="box b"></div>
</div>

.wrapper {
  display: flex;
}

.box {
  width: 400px;
  height: 80px;
  padding: 0.5em;
  border: 1px solid #cccccc;
  margin: 20px;
}

.a {
  background-image: linear-gradient(
    105deg,
    rgb(0 249 255 / 100%) 39%,
    rgb(51 56 57 / 100%) 96%
  );
}

.b {
  background-image: radial-gradient(
    circle,
    rgb(0 249 255 / 100%) 39%,
    rgb(51 56 57 / 100%) 96%
  );
  background-size: 100px 50px;
}

Nhiều hình ảnh nền

Cũng có thể chỉ định nhiều hình ảnh nền trong một khai báo duy nhất. Bạn làm điều này bằng cách chỉ định nhiều giá trị background-image được phân tách bằng dấu phẩy.

Khi bạn làm điều này, bạn có thể có các hình ảnh nền chồng lên nhau. Các nền sẽ xếp chồng với hình ảnh nền được liệt kê cuối cùng ở dưới cùng của ngăn xếp, và mỗi hình ảnh trước đó xếp chồng lên cái theo sau nó trong mã.

Các thuộc tính background-* khác cũng có thể có các giá trị được phân tách bằng dấu phẩy theo cách giống như background-image:

background-image:
  url("image1.png"), url("image2.png"), url("image3.png"), url("image4.png");
background-repeat: no-repeat, repeat-x, repeat;
background-position:
  10px 20px,
  top right;

Mỗi giá trị của các thuộc tính khác nhau sẽ khớp với các giá trị ở cùng vị trí trong các thuộc tính khác. Ví dụ, giá trị background-repeat của image1 sẽ là no-repeat. Tuy nhiên, điều gì xảy ra khi các thuộc tính khác nhau có số lượng giá trị khác nhau? Câu trả lời là số lượng giá trị nhỏ hơn sẽ xoay vòng — trong ví dụ trên có bốn hình ảnh nền nhưng chỉ có hai giá trị background-position. Hai giá trị vị trí đầu tiên sẽ được áp dụng cho hai hình ảnh đầu tiên, sau đó chúng sẽ xoay vòng lại — image3 sẽ được cho giá trị vị trí đầu tiên, và image4 sẽ được cho giá trị vị trí thứ hai.

Thử nghiệm với nhiều hình ảnh nền

Hãy chơi thử. Ví dụ bên dưới bao gồm hai hình ảnh nền. Hãy thử chỉnh sửa ví dụ như sau:

• Để minh họa thứ tự xếp chồng, hãy thử chuyển đổi hình ảnh nền nào đứng đầu tiên trong danh sách.
• Thêm một số thuộc tính background-* khác để thay đổi vị trí, kích thước hoặc giá trị lặp lại của hình ảnh.
• Hãy thử thêm một gradient làm background-image thứ ba.

<div class="wrapper">
  <div class="box"></div>
</div>

.wrapper {
  display: flex;
}

.box {
  width: 500px;
  height: 80px;
  padding: 0.5em;
  border: 1px solid #cccccc;
  margin: 20px;
}

.box {
  background-image:
    url("https://mdn.github.io/shared-assets/images/examples/star.png"),
    url("https://mdn.github.io/shared-assets/images/examples/big-star.png");
}

Đính kèm nền

Một tùy chọn khác chúng ta có sẵn cho nền là chỉ định cách chúng cuộn khi nội dung cuộn. Điều này được kiểm soát bằng thuộc tính background-attachment, có thể nhận các giá trị sau:

• scroll: làm cho nền của phần tử cuộn khi trang được cuộn. Nếu nội dung phần tử được cuộn, nền không di chuyển. Trên thực tế, nền được cố định ở cùng vị trí trên trang, vì vậy nó cuộn khi trang cuộn.
• fixed: làm cho nền của phần tử được cố định vào viewport để nó không cuộn khi trang hoặc nội dung phần tử được cuộn. Nó sẽ luôn ở cùng vị trí trên màn hình.
• local: cố định nền vào phần tử mà nó được đặt trên, vì vậy khi bạn cuộn phần tử, nền cuộn cùng với nó.

Thuộc tính background-attachment chỉ có hiệu lực khi có nội dung để cuộn, vì vậy chúng tôi đã tạo demo để minh họa sự khác biệt giữa ba giá trị — xem background-attachment.html (cũng xem mã nguồn tại đây).

Sử dụng thuộc tính viết tắt background

Bạn sẽ thường thấy nền được chỉ định bằng thuộc tính viết tắt background, cho phép bạn đặt tất cả các thuộc tính khác nhau cùng một lúc.

Nếu sử dụng nhiều nền, bạn cần chỉ định tất cả các thuộc tính cho nền đầu tiên, sau đó thêm nền tiếp theo của bạn sau dấu phẩy. Trong ví dụ bên dưới, chúng ta có gradient với kích thước và vị trí, sau đó là nền hình ảnh với no-repeat và vị trí, rồi màu.

Có một số quy tắc cần tuân theo khi viết các giá trị viết tắt hình ảnh nền, ví dụ:

• background-color chỉ có thể được chỉ định sau dấu phẩy cuối cùng.
• Giá trị của background-size chỉ có thể được bao gồm ngay sau background-position, được phân tách bằng ký tự /, như sau: center/80%.

Hãy xem trang MDN cho background để tìm hiểu thêm về cú pháp.

<div class="box"></div>

.box {
  width: 500px;
  height: 300px;
  padding: 0.5em;
  background:
    linear-gradient(
        105deg,
        rgb(255 255 255 / 20%) 39%,
        rgb(51 56 57 / 100%) 96%
      )
      center center / 400px 200px no-repeat,
    url("https://mdn.github.io/shared-assets/images/examples/big-star.png")
      center no-repeat,
    rebeccapurple;
}

Các cân nhắc về khả năng tiếp cận với nền

Khi đặt văn bản trên hình ảnh nền hoặc màu, bạn cần đảm bảo rằng bạn có đủ độ tương phản để văn bản có thể đọc được bởi khách truy cập của bạn. Khi chỉ định hình ảnh với nội dung văn bản trên đó, bạn cũng nên chỉ định background-color cho phép văn bản có thể đọc được nếu hình ảnh không tải.

Trình đọc màn hình không thể phân tích hình ảnh nền; do đó, chúng chỉ nên là trang trí thuần túy. Bất kỳ nội dung quan trọng nào phải là một phần của trang HTML và không được chứa trong nền.

Đường viền

Khi tìm hiểu về mô hình hộp, chúng ta đã khám phá cách đường viền ảnh hưởng đến kích thước hộp. Trong bài học này, chúng ta sẽ xem xét cách sử dụng đường viền sáng tạo.

Thông thường, khi chúng ta thêm đường viền cho phần tử với CSS, chúng ta sử dụng thuộc tính viết tắt border để đặt màu, chiều rộng và kiểu của đường viền trên cả bốn cạnh của hộp trong một khai báo:

.box {
  border: 1px solid black;
}

Hoặc chúng ta có thể nhắm mục tiêu một cạnh của hộp, ví dụ:

.box {
  border-top: 1px solid black;
}

Các thuộc tính riêng lẻ bao gồm các thuộc tính viết tắt border-width, border-style và border-color:

.box {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

Cũng có các thuộc tính dạng dài cho chiều rộng, kiểu và màu cho từng bốn cạnh:

.box {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;
}

Thử nghiệm với đường viền

Có nhiều kiểu khác nhau mà bạn có thể sử dụng cho đường viền. Trong ví dụ bên dưới, chúng ta đã sử dụng hai kiểu đường viền khác nhau cho hộp và hai kiểu đường viền khác nhau cho tiêu đề. Hãy thử nghiệm với kiểu, chiều rộng và màu đường viền để xem cách đường viền hoạt động.

<div class="box">
  <h2>Borders</h2>
  <p>Try changing the borders.</p>
</div>

* {
  padding: 0.2em;
}
.box {
  width: 500px;
  background-color: #567895;
  border: 5px solid #0b385f;
  border-bottom-style: dashed;
  color: white;
}

h2 {
  border-top: 2px dotted rebeccapurple;
  border-bottom: 1em double rgb(24 163 78);
}

Góc bo tròn

Bạn có thể thêm các góc bo tròn vào hộp bằng thuộc tính border-radius và các thuộc tính dạng dài liên quan đến từng góc của hộp. Hai độ dài hoặc phần trăm có thể được sử dụng làm giá trị, giá trị đầu tiên xác định bán kính ngang và giá trị thứ hai là bán kính dọc. Trong nhiều trường hợp, bạn sẽ chỉ truyền vào một giá trị, giá trị đó sẽ được sử dụng cho cả hai.

Ví dụ, để cho tất cả bốn góc của hộp bán kính 10px:

.box {
  border-radius: 10px;
}

Hoặc để làm cho góc trên bên phải có bán kính ngang là 1em, và bán kính dọc là 10%:

.box {
  border-top-right-radius: 1em 10%;
}

Thử nghiệm với bán kính đường viền

Chúng ta đã đặt cả bốn góc trong ví dụ bên dưới và sau đó thay đổi các giá trị cho góc trên bên phải để làm cho nó khác. Bạn có thể thử nghiệm với các giá trị để thay đổi các góc. Hãy xem trang thuộc tính cho border-radius để xem các tùy chọn cú pháp có sẵn. Trình tạo border-radius có thể được sử dụng để xuất ra các giá trị góc bo tròn cho bạn.

<div class="box">
  <h2>Borders</h2>
  <p>Try changing the borders.</p>
</div>

.box {
  width: 500px;
  height: 110px;
  padding: 0.5em;
  border: 10px solid rebeccapurple;
  border-radius: 1em;
  border-top-right-radius: 10% 30%;
}

Tóm tắt

Bạn có thể thấy có khá nhiều điều khi thêm nền hoặc đường viền vào hộp. Hãy khám phá các trang thuộc tính khác nhau nếu bạn muốn tìm hiểu thêm về bất kỳ tính năng nào được thảo luận ở đây. Hầu hết mọi trang trên MDN đều có ví dụ để bạn thử nghiệm nhằm nâng cao kiến thức.

Trong bài viết tiếp theo, chúng ta sẽ cung cấp cho bạn một số bài kiểm tra mà bạn có thể sử dụng để kiểm tra mức độ hiểu và ghi nhớ thông tin chúng ta đã cung cấp về tạo kiểu nền và đường viền.

• Previous
• Overview: Kiến thức cơ bản về CSS
• Next