Thuộc tính màu nền trong CSS được sử dụng để đặt màu nền cho phần tử. Nó áp dụng các màu đồng nhất làm nền của phần tử. Nền của một phần tử bao phủ toàn bộ kích thước, bao gồm cả phần đệm và đường viền, nhưng không bao gồm lề. Nó có thể được áp dụng cho tất cả các phần tử HTML

cú pháp

Giá trị color_name của thuộc tính này xác định giá trị của màu nền hoặc chỉ định mã màu. Nó có thể được đưa ra bằng cách sử dụng tên màu, giá trị rgb() hoặc giá trị thập lục phân

Giá trị trong suốt của thuộc tính này là giá trị mặc định, chỉ định màu nền trong suốt

Ví dụ

Trong ví dụ này, chúng tôi đang xác định giá trị của thuộc tính màu nền bằng cách sử dụng tên màu, giá trị thập lục phân, giá trị rgb() và giá trị hsl(). Có bốn phần tử div mà chúng tôi áp dụng thuộc tính màu nền

Bạn đã bắt đầu tạo trang HTML của mình và bạn muốn thêm chút màu sắc cho trang – có thể thay đổi màu của văn bản hoặc đặt nền đẹp. Làm cách nào bạn làm được việc đó?

Trong bài viết này, tôi sẽ chỉ cho bạn cách bạn có thể thay đổi màu nền của trang theo một số cách khác nhau

Cách thay đổi màu nền của phần tử HTML

Bạn có thể thay đổi màu nền của phần tử HTML bằng cách sử dụng thuộc tính CSS

body {
  background-color: black;
}

2 và đặt cho nó một giá trị màu

p {
  background-color: pink;
}

Với mã này, các đoạn văn có nền màu hồng

Ví dụ: mã này sẽ làm cho tất cả các thành phần đoạn văn trong tệp HTML của bạn có nền màu hồng vì thuộc tính

body {
  background-color: black;
}

2 có giá trị là

body {
  background-color: black;
}

4

Có khoảng 140 tên màu mà bạn có thể sử dụng, chẳng hạn như _______ 55, ________ 56, ________ 10 và nhiều tên khác

Một số tên màu có thể bạn có thể sử dụng

Ghi chú. nếu bạn đặt màu nền cho một phần tử và không thấy nó thay đổi, đó có thể là lỗi cú pháp hoặc cũng có thể là phần tử không có chiều rộng hoặc chiều cao. Cố gắng đưa một số nội dung vào đó hoặc cung cấp cho nó chiều rộng và chiều cao bằng cách sử dụng các thuộc tính CSS

body {
  background-color: black;
}

1 và

body {
  background-color: black;
}

2

Thực tế có gần 16. 8 triệu màu mà bạn có thể sử dụng. Bạn có thể sử dụng tất cả các màu này bằng các giá trị RGB. Ngoài ra còn có các màu HSL mà bạn có khoảng 3. 7 triệu màu để lựa chọn. Trong phần tiếp theo, bạn sẽ tìm hiểu về tất cả các cách tạo màu khác nhau này.

Ký hiệu màu khác nhau

Thuộc tính

body {
  background-color: black;
}

2 chấp nhận màu sắc như giá trị có thể. Ở đây bạn sẽ thấy bốn ký hiệu khác nhau cho các giá trị màu

Đầu tiên sẽ là tên màu và có khoảng 140 từ khóa mà bạn có thể sử dụng. Đây là cách dễ nhất để chọn màu vì nó không yêu cầu hiểu các ký hiệu đặc biệt – nhưng nó có một số tùy chọn hạn chế

Cách thứ hai và thứ ba để đặt tên hoặc chọn màu là giá trị RGB và giá trị thập lục phân. Trong các ký hiệu này, màu sắc được xác định bởi lượng màu đỏ, lục và lam mà chúng chứa

Điều này xuất phát từ cách màn hình tạo ra màu sắc. Một màn hình được tạo thành từ các pixel và mỗi pixel được chiếu sáng bằng đèn LED có ba màu khác nhau, xanh lá cây, xanh lam và đỏ, có thể tỏa sáng ở các cường độ khác nhau

Ký hiệu thứ tư là màu HSL, hoặc Hue-Saturation-Lightness. Ký hiệu này xuất phát từ Thiết kế đồ họa, vì nó phản ánh cách con người nghĩ về màu sắc một cách tự nhiên hơn. một màu thuần khiết (màu sắc), trong đó độ bão hòa và độ sáng có thể thay đổi

Bạn có thể sử dụng bất kỳ ký hiệu màu nào trong số này để tạo màu cho nền, nhưng hãy xem chúng chi tiết hơn để bạn có thể chọn ký hiệu bạn thích

Tên màu HTML

Có 16 màu cơ bản được công nhận trong phiên bản đầu tiên của HTML. Hiện có hơn 140 màu được đặt tên mà bạn có thể sử dụng

16 màu cơ bản _______1 Với CSS này,

body {
  background-color: black;
}

4 có nền đenVí dụ về trang HTML có

body {
  background-color: black;
}

4 được cung cấp ________ 52 của

body {
  background-color: black;
}

7

Bạn có thể xem tất cả các màu được đặt tên ở phần phụ lục cuối bài viết

Màu RGB

RGB là viết tắt của Red-Green-Blue. Các màu ở định dạng này được viết là

body {
  background-color: black;
}

8, trong đó mỗi giá trị là một số từ

body {
  background-color: black;
}

9 đến

body {
  background-color: black;
}

00 tương ứng với lượng màu đỏ, lục và lam được sử dụng để tạo ra mỗi màu

Ví dụ: nếu bạn có

body {
  background-color: black;
}

8, bạn sẽ có màu đen

Để có màu đỏ, bạn viết

body {
  background-color: black;
}

02, trong đó có càng nhiều màu đỏ càng tốt với

body {
  background-color: black;
}

00,

body {
  background-color: black;
}

9 cho màu xanh dương và

body {
  background-color: black;
}

9 cho màu xanh lá cây

Bạn có thể nhận được các biến thể khác của màu đỏ với một lượng nhỏ màu xanh lá cây và/hoặc màu xanh lam và ít màu đỏ hơn một chút. Ví dụ: bạn có thể lấy màu đỏ cam với

body {
  background-color: black;
}

06 hoặc màu đỏ sẫm với

body {
  background-color: black;
}

07

Màu sắc của các giá trị rgb được trình bày ở trên.

body {
  background-color: black;
}

0Các phần tử

body {
  background-color: black;
}

08 có nền màu đỏ đậm. Ví dụ về một trang HTML với phần tử

body {
  background-color: black;
}

08 được cho là

body {
  background-color: black;
}

2 của

body {
  background-color: black;
}

07

Dưới đây là một ví dụ về cách màu sắc thay đổi khi bạn điều chỉnh hai trong số các giá trị RGB. góc trên cùng bên trái của hình vuông được tô màu bằng

body {
  background-color: black;
}

8, góc trên bên phải bằng

body {
  background-color: black;
}

33, góc dưới bên trái bằng

body {
  background-color: black;
}

34 và góc dưới cùng bên phải bằng

body {
  background-color: black;
}

35

May mắn thay, bạn không cần phải đoán các con số để có được màu bạn muốn. Bạn có thể tìm thấy nhiều công cụ chọn màu trực tuyến cho phép bạn chọn màu bằng thanh trượt (hoặc các phương pháp khác) và cung cấp cho bạn giá trị màu RGB mà bạn muốn sử dụng

Màu thập lục phân

Màu thập lục phân là một cách khác để viết màu RGB. Với hệ thập lục phân, bạn cũng có ba số, một số cho mỗi màu, với 256 giá trị có thể

Tuy nhiên, trong trường hợp này, mỗi màu có hai chữ số đi từ

body {
  background-color: black;
}

9 đến

body {
  background-color: black;
}

37 (nghĩa là  

body {
  background-color: black;
}

9,

body {
  background-color: black;
}

39,

body {
  background-color: black;
}

00,

body {
  background-color: black;
}

01,

body {
  background-color: black;
}

02,

body {
  background-color: black;
}

03,

body {
  background-color: black;
}

04,

body {
  background-color: black;
}

05,

body {
  background-color: black;
}

06,

body {
  background-color: black;
}

07, và

body {
  background-color: black;
}

08,

body {
  background-color: black;
}

09,

body {
  background-color: black;
}

20,

body {
  background-color: black;
}

21, . Một chữ số có 16 giá trị có thể và hai chữ số có 256 giá trị có thể, từ

body {
  background-color: black;
}

24, đến

body {
  background-color: black;
}

25 (255)

Các màu thập lục phân được viết bằng

body {
  background-color: black;
}

26 trước giá trị. Ví dụ, màu đỏ được viết là

body {
  background-color: black;
}

27, đỏ đậm là

body {
  background-color: black;
}

28 và đỏ cam là

body {
  background-color: black;
}

29

Các màu được đề cập trong phần trên.

body {
  background-color: black;
}

3Các phần tử

body {
  background-color: black;
}

20 có nền màu đỏ cam. Ví dụ về một trang HTML có phần tử

body {
  background-color: black;
}

20 được cho một

body {
  background-color: black;
}

2 trong số

body {
  background-color: black;
}

29

Bạn cũng có thể sử dụng bộ chọn màu để tạo các giá trị thập lục phân

tốc ký thập lục phân

Bạn có thể viết số thập lục phân ở dạng tốc ký, chỉ sử dụng ba chữ số thay vì sáu. Ví dụ: bạn có thể viết màu đỏ như

body {
  background-color: black;
}

24. Điều này làm giảm số lượng màu có thể xuống chỉ còn hơn 4.000, nhưng nó ngắn hơn để viết và đôi khi đó là điều quan trọng

Mỗi chữ số thay cho hai chữ số giống nhau, vì vậy chúng tôi không thể viết

body {
  background-color: black;
}

28 ở dạng tốc ký, vì

body {
  background-color: black;
}

06 và

body {
  background-color: black;
}

09 không giống nhau. Nhưng chúng ta có thể viết

body {
  background-color: black;
}

28 tương đương với

body {
  background-color: black;
}

29, khá giống với màu đỏ sẫm khác. Và màu đỏ cam có thể là ________ 540 (bằng ________ 541)

Các màu được đề cập trong phần trên

Màu sắc HSL

HSL có nghĩa là Hue-Saturation-Lightness, và nó là một cách viết màu hoàn toàn khác so với những gì chúng ta đã thấy cho đến nay

Màu HSL được thể hiện bằng ba số. màu sắc đi từ

body {
  background-color: black;
}

9 đến

body {
  background-color: black;
}

43, độ bão hòa và độ sáng từ

body {
  background-color: black;
}

9 đến

body {
  background-color: black;
}

45

Màu sắc xác định màu cơ bản và giá trị của nó là một góc, một độ trên bánh xe màu. Trong trường hợp này, màu đỏ là ________ 19, màu xanh lá cây là ________ 547, màu xanh lam là ________ 548 và ________ 543 lại là màu đỏ

Tất cả các màu có thể chỉ thay đổi sắc độ, với sắc độ 0 ở bên trái và sắc độ 360 ở bên phải

Độ bão hòa đi từ

body {
  background-color: black;
}

9, làm cho màu có màu xám, đến

body {
  background-color: black;
}

45, làm cho màu sắc đầy đủ

Biến thể của độ bão hòa cho màu đỏ, 0% ở bên trái, 100% ở bên phải

Độ sáng là lượng màu đen hoặc trắng được thêm vào màu.

body {
  background-color: black;
}

9 là màu đen,

body {
  background-color: black;
}

53 là màu của chính nó và

body {
  background-color: black;
}

45 là màu trắng

Thay đổi độ đậm nhạt, với 0% ở bên trái và 100% ở bên phải

Ví dụ: bạn sẽ viết màu đỏ là

body {
  background-color: black;
}

55, màu đỏ cam là

body {
  background-color: black;
}

56 và màu đỏ đậm là

body {
  background-color: black;
}

57

Có thể dễ dàng tìm thấy các màu tương tự bằng cách sử dụng HSL hơn so với các cách phối màu khác. Với màu đỏ và các biến thể của nó, bạn đã thấy rằng để có màu đỏ đậm hơn, bạn chỉ cần thay đổi tỷ lệ phần trăm độ đậm nhạt và trộn màu đỏ với một màu khác là đủ để thay đổi giá trị sắc độ của nó một chút

Hãy xem nó hoạt động với một màu hỗn hợp ở hệ thập lục phân, như màu cam (

body {
  background-color: black;
}

58 hoặc

body {
  background-color: black;
}

59), được viết bằng HSL là

body {
  background-color: black;
}

60. Bạn có thể có màu cam nhạt hơn chỉ bằng cách tăng độ sáng

Vì vậy, ví dụ bạn có thể viết

body {
  background-color: black;
}

61 để lấy màu cam nhạt hơn này. Với các ký hiệu khác, bạn sẽ cần phải viết

body {
  background-color: black;
}

62 hoặc

body {
  background-color: black;
}

63

Một ví dụ về trang HTML với phần tử

body {
  background-color: black;
}

64 được cung cấp một

body {
  background-color: black;
}

2 của

body {
  background-color: black;
}

66

Bạn cũng có thể tìm thấy các công cụ chọn màu trực tuyến cho các màu HSL

Tên tài sản viết tắt

Bạn cũng có thể đặt màu nền bằng cách sử dụng thuộc tính

body {
  background-color: black;
}

67 tay ngắn

body {
  background-color: black;
}

0Các thuộc tính CSS tương tự đã thấy trước đây, nhưng với thuộc tính tốc ký

body {
  background-color: black;
}

67. Ví dụ về trang HTML với tất cả các thành phần được tô màu nền.

Đây là một thuộc tính linh hoạt hơn, vì nó là viết tắt của nhiều thuộc tính

body {
  background-color: black;
}

67 khác nhau, như

body {
  background-color: black;
}

00 và

body {
  background-color: black;
}

01. Khi bạn sử dụng nó với một giá trị màu, nó hoạt động giống hệt như

body {
  background-color: black;
}

2

Phần kết luận

Bạn đã học cách tạo màu nền cho các thành phần HTML của mình bằng cách sử dụng thuộc tính ________ 52 và cách viết tắt của nó là ________ 567 và sử dụng các ký hiệu màu khác nhau

Bây giờ bạn có tất cả các công cụ cần thiết để thêm bất kỳ màu nào bạn muốn vào các trang web của mình. Vui thích

ruột thừa

Tất cả hơn 140 màu được đặt tên

biến thể chính tả

Các tên màu có chứa từ "Grey" cũng có thể được viết với cách viết là "Grey" như hình bên dưới

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Ilenia Magoni

Người điều hành và tác giả nhân viên cho freeCodeCamp

---

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Làm cách nào để thay đổi hình nền trong CSS?

Làm cách nào để thay đổi màu nền của hình ảnh?

Làm cách nào để đặt màu nền trong CSS?