Thiết lập màu nền trong HTML

Để thiết lập màu nền cho website trong HTML, bạn chỉ cần thay đổi thành tố phần "body" (thân) của thẻ <style></style>. Các bước hướng dẫn sẽ thay đổi theo hình dạng của hình nền. Hãy học cách đặt nền website thành một màu đồng nhất, ảnh, màu đậm dần hoặc nhạt dần, hình động nhiều màu sắc.

Các bước[sửa]

Đặt nền một màu đồng nhất[sửa]

Mở tập tin HTML trong phần mềm chỉnh sửa văn bản yêu thích. Với HTML5, thuộc tính HTML <bgcolor> không được hỗ trợ nữa. Đối với màu nền cùng các thiết lập kiểu dáng khác của trang web, bạn có thể sử dụng CSS.^[1]
Thêm thẻ <style></style> vào tài liệu. Toàn bộ thông tin kiểu dáng của trang (bao gồm cả màu nền) sẽ được mã hóa bằng các thẻ đó. Nếu bạn có sẵn thẻ <style>, chỉ cần kéo xuống đoạn đó.
```
<!DOCTYPE html>
<html>
<head>
 
<style>
 
</style>
 
</head>
</html>
```
Gõ thành tố "body" vào giữa thẻ <style></style>. Bất kỳ thao tác nào can thiệp vào thành tố "body" trong CSS sẽ ảnh hưởng đến cả trang.
```
<!DOCTYPE html>
<html>
<head>
 
<style>
body { 
 
}
 
</style>
</head>
<body>
</body>
 
</html>
```
Thêm thuộc tính "background-color" (màu nền) vào trước thành tố "body". Trong đoạn mã này, chỉ cần một lần "color" (màu) là mã sẽ hoạt động.
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: 
}
</style>
</head>
<body>
</body>
</html>
```
Thêm mã màu mong muốn vào thuộc tính "background-color". Bạn có thể gõ màu bằng tên (green, blue, red, v.v.), hoặc sử dụng mã thập lục (hex) tương ứng với màu bạn muốn (ví dụ #000000 là màu đen, #ff0000 là màu đỏ, v.v.) hoặc nhập giá trị RGB tương ứng với màu (ví dụrgb(255,255,0) là màu vàng). Dưới đây là ví dụ sử dụng mã màu thập lục, màu nền của bạn sẽ giống với màu biểu ngữ của wikiHow:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: #93B874;
}
</style>
</head>
<body>
</body>
</html>
```
- Trắng: #FFFFFF
- Hồng nhạt: #FFCCE6
- Nâu đỏ nung: #993300
- Màu chàm - #4B0082
- Tím - #EE82EE
- Vào trang w3schools.com HTML Color Picker để tìm mã thập lục tương ứng với màu sắc bạn muốn.
Sử dụng thuộc tính "background-color" để đặt màu nền cho các thành tố khác. Tương tự với thành tố "body", bạn có thể dùng thuộc tính "background-color" để quyết định màu nền của các thành tố khác. Chỉ cần thêm các thành tố đó vào thẻ <style></style> cùng với thuộc tính "background-color".^[2]
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: #93B874;
}
h1 {
    background-color: orange;
}
p {
    background-color: rgb(255,0,0);
}
</style>
</head>
<body>
<h1>Phần tiêu đề có nền màu cam</h1>
<p>Đoạn văn có nền màu đỏ</p>
</body>
</html>
```

Dùng ảnh làm hình nền[sửa]

Mở tập tin HTML trong phần mềm chỉnh sửa. Nhiều người thích dùng ảnh làm hình nền cho website. HTML cho phép bạn đặt hình trang trí, hoa văn, ảnh chụp hay bất kỳ ảnh nào khác làm hình nền. Với HTML5, bạn nên sử dụng CSS để đặt hình nền trong thẻ <style></style>.
Thêm thẻ <style></style> vào tập tin HTML. Toàn bộ thông tin kiểu dáng của trang (bao gồm cả màu nền) sẽ được mã hóa trong các thẻ này. Nếu bạn có sẵn thẻ <style>, chỉ cần kéo xuống đoạn đó.
```
<!DOCTYPE html>
<html>
<head>
 
<style>
 
</style>
 
</head>
</html>
```
Nhập thành tố "body" vào thẻ <style></style>. Bất kỳ thao tác nào liên quan tới thành tố "body" trong CSS sẽ ảnh hưởng tới cả trang.
```
<!DOCTYPE html>
<html>
<head>
 
<style>
body { 
 
}
 
</style>
</head>
<body>
</body>
 
</html>
```
Thêm thuộc tính "background-image" vào thành tố "body". Khi muốn thêm thuộc tính này, bạn cần có tên tập tin ảnh. Đảm bảo rằng tập tin ảnh được lưu trữ cùng thư mục với tập tin HTML (hoặc nhập đường dẫn đầy đủ của tập tin lên máy chủ).^[3]
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("imagename.png");
    background-color: #93B874;
}
</style>
</head>
<body>
</body>
</html>
```
- Bạn có thể thêm thuộc tính background-color phòng trường hợp không tải được ảnh nền.
Ảnh nhiều lớp. Bạn có thể xếp ảnh chồng lên nhau. Cách này rất hữu dụng nếu bạn sử dụng nhiều ảnh nền trong suốt để kết hợp với nhau tạo ra hình nền.
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("image1.png"), url("image2.gif");
    background-color: #93B874;
}
</style>
</head>
<body>
</body>
</html>
```
- Ảnh được liệt kê đầu tiên sẽ xuất hiện trên cùng. Ảnh được liệt kê thứ 2 sẽ xuất hiện sau ảnh đầu tiên.

Đặt nền đậm/nhạt dần[sửa]

Sử dụng CSS để tạo nền đậm/nhạt dần. Nếu bạn muốn thứ gì đó phá cách hơn một màu đồng nhất, nhưng lại không đủ thời gian để tạo ảnh động nhiều màu, hãy thử nền đậm/nhạt dần. Đây là kiểu nền mà màu sắc sẽ đậm dần hoặc nhạt dần thành màu khác. Bạn có thể dùng CSS để tạo và tùy chỉnh nền. Trước khi tạo nền, bạn cần nắm được những điều cơ bản khi chỉnh sửa kiểu dáng trang với CSS.
Hiểu các cú pháp cơ bản. Khi tạo nền đậm/nhạt dần, có 2 phần thông tin bạn cần: điểm/góc bắt đầu và 2 màu sắc biến đổi lẫn nhau. Bạn có thể chọn biến đổi giữa nhiều màu hoặc thiết lập hướng, góc độ đậm nhạt của màu sắc.^[4]
```
background: linear-gradient(direction/angle, color1, color2, color3, etc.);
```

Tạo nền đậm/nhạt dần theo chiều dọc. Nếu không chỉ định hướng cụ thể, màu sẽ nhạt dần theo chiều từ trên xuống dưới. Mỗi trình duyệt lại có những thành tố hiển thị nền đậm/nhạt dần khác nhau, bạn cần nhập một số phiên bản mã khác nhau.

<!DOCTYPE html>
<html>
<head>
<style>
html {
    min-height: 100%; /* Đây là đoạn mã bắt buộc để màu nền hiển thị toàn trang */
}
 
body {
    background: -webkit-linear-gradient(#93B874, #C9DCB9); /* Chrome 10+, Safari 5.1+ */
    background: -o-linear-gradient(#93B874, #C9DCB9); /* Opera 11.1+ */
    background: -moz-linear-gradient(#93B874, #C9DCB9); /* Firefox 3.6+ */
    background: linear-gradient(#93B874, #C9DCB9); /* Standard syntax (must be last) */
    background-color: #93B874; /* Bạn nên đặt màu nền phòng trường hợp không tải được màu nền đậm/nhạt dần*/
}
</style>
</head>
<body>
</body>
</html>

Tạo màu nền đậm/nhạt dần có định hướng. Thêm định hướng vào màu nền là cách bạn thay đổi hướng đổi màu. Lưu ý rằng các trình duyệt khác nhau sẽ có cách hiển thị đổi màu khác nhau. Các kết quả đều thu được màu nền đậm/nhạt dần giống nhau.^[5]

<!DOCTYPE html>
<html>
<head>
<style>
html {
    min-height: 100%;
}
 
body {
    background: -webkit-linear-gradient(left, #93B874, #C9DCB9); /* từ trái sang phải*/
    background: -o-linear-gradient(right, #93B874, #C9DCB9); /* kết thúc phía bên phải */
    background: -moz-linear-gradient(right, #93B874, #C9DCB9); /* kết thúc phía bên phải */
    background: linear-gradient(to right, #93B874, #C9DCB9); /* chuyển động sang phía bên phải */
    background-color: #93B874; /* Bạn nên đặt màu nền đồng nhất phòng trường hợp không tải được màu nền đậm/nhạt dầntn  5555n*/
}
</style>
</head>
<body>
</body>
</html>

Sử dụng các thuộc tính khác để điều chỉnh màu nền đậm/nhạt dần. Bạn có thể tùy biến rất nhiều yếu tố.
- Ví dụ, bạn có thể thêm nhiều hơn 2 mà hoặc thiết lập phần trăm hiển thị của từng màu. Ngoài ra, bạn có thể thiết lập khoảng cách giữa từng phân khúc màu.
  background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
- Thêm độ trong cho màu sắc. Đây là cách để làm màu nhạt đi. Sử dụng cùng màu để màu nhạt dần đến trong suốt. Bạn cần dùng chức năng rgba() để xác định màu. Giá trị cuối cùng sẽ quyết định độ trong của màu: 0 màu đồng nhất và 1 là trong suốt.
  background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1));

Đặt nền đổi màu[sửa]

Tìm thẻ <style> trong đoạn mã HTML. Nếu không thích nền một màu đơn thuần, hãy thử nền động đổi màu. Với HTML 5, bạn nên chỉnh sửa hình nền với CSS. Nếu chưa từng thiết lập nền với CSS, hãy tham khảo Đặt nền một màu đồng nhất trước khi thực hiện phương pháp này.
Thêm thuộc tính ảnh động vào thành tố "body". Bạn cần thêm 2 thuộc tính khác nhau, mỗi trình duyệt lại yêu cầu mã khác nhau.^[6]
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
    -webkit-animation: colorchange 60s infinite; 
    animation: colorchange 60s infinite;
    }
</style>
</head>
<body>
</body>
</html>
```
- -webkit-animation là thuộc tính bắt buộc trên các trình duyệt nền tảng Chromium (Chrome, Opera, Safari). animation là tiêu chuẩn của các trình duyệt khác.
- colorchange là tên tập tin hình động trong ví dụ này.
- 60s là thời gian (60 giây) của ảnh động/chuyển động. Đừng quên thiết lập cả cú pháp webkit và tiêu chuẩn.
- infinite là mã để lập đi lập lại ảnh động. Nếu muốn ảnh động chạy một lần, đến màu cuối cùng thì dừng lại, bạn có thể bỏ qua đoạn này.
Thêm màu vào ảnh động. Giờ bạn sẽ sử dụng quy luật @keyframes để chọn màu dùng trong ảnh động cùng với khoảng thời gian từng màu xuất hiện. Mỗi trình duyệt web lại yêu cầu mã khác nhau.^[7]
```
<!DOCTYPE html>
<html>
<head>
<style>
 
body {
    -webkit-animation: colorchange 60s infinite; 
    animation: colorchange 60s infinite;
}
 
@-webkit-keyframes colorchange {
 
     0%  {background: #33FFF3;}
    25%  {background: #78281F;}
    50%  {background: #117A65;}
    75%  {background: #DC7633;}
    100% {background: #9B59B6;}
}
 
@keyframes colorchange {
     0%  {background: #33FFF3;}
    25%  {background: #78281F;}
    50%  {background: #117A65;}
    75%  {background: #DC7633;}
    100% {background: #9B59B6;}
}   
 
</style>
</head>
<body>
</body>
</html>
```
- Lưu ý 2 quy tắc (@-webkit-keyframes và @keyframes có cùng màu nền và phần trăm. Bạn cần thiết lập như vậy để hình ảnh được hiển thị đồng nhất trên các trình duyệt khác nhau.
- Phần trăm (0%, 25%, v.v) là tổng độ dài của ảnh động (60s). Khi tải trang, nền sẽ là màu được đặt ở 0% (#33FFF3). Khi ảnh động chạy được 25% của 60 giây, nền sẽ chuyển sang màu #78281F, và cứ tiếp tục như vậy.
- Bạn có thể điều chỉnh thời gian và màu sắc sao cho phù hợp với nhu cầu.

Nguồn và Trích dẫn[sửa]

« Mới nhất
‹ Mới hơn
Cũ hơn ›

[1] ttps://developer.mozilla.org/en-US/docs/Web/CSS/background-color

[2] ttp://www.w3schools.com/css/css_background.asp

[3] ttp://www.w3schools.com/cssref/pr_background-image.asp

[4] ttps://css-tricks.com/css3-gradients/

[5] ttp://www.w3schools.com/css/css3_gradients.asp

[6] ttps://codepen.io/metagrapher/pen/tgcLl

[7] ttp://www.w3schools.com/css/css3_animations.asp

[1]

[2]

[3]

[4]

[5]

[6]

[7]

Thiết lập màu nền trong HTML

Mục lục

Các bước[sửa]

Đặt nền một màu đồng nhất[sửa]

Dùng ảnh làm hình nền[sửa]

Đặt nền đậm/nhạt dần[sửa]

Đặt nền đổi màu[sửa]

Nguồn và Trích dẫn[sửa]

Trình đơn chuyển hướng

Công cụ cá nhân

Không gian tên

Biến thể

Tìm kiếm

Xem nhanh

Cộng đồng

Các đề án

Hướng dẫn để

Công cụ

Thiết lập màu nền trong HTML

Mục lục

Các bước[sửa]

Đặt nền một màu đồng nhất[sửa]

Dùng ảnh làm hình nền[sửa]

Đặt nền đậm/nhạt dần[sửa]

Đặt nền đổi màu[sửa]

Nguồn và Trích dẫn[sửa]

Bài liên quan

Trình đơn chuyển hướng

Tìm kiếm