Đặt màu nền của một trang web hoặc một yếu tố trên trang đó có thể cho phép bạn tạo bố cục độc đáo.
Lấy trang chủ của Delish làm ví dụ. Ảnh nền của phần tiêu đề là một món súp màu sắc. Để đảm bảo rằng người đọc vẫn có thể thấy tên công thức nấu ăn, màu nền của khung văn bản được đặt thành màu trắng. Tác động rất ấn tượng và dễ đọc.
Bạn thường có thể đơn giản sử dụng thuộc tính màu nền để thay đổi màu nền của một trang hoặc yếu tố.
Nói rằng bạn muốn thay đổi màu nền của một trang web thành Maroon. Bạn sẽ chỉ cần thêm thuộc tính bgcolor vào thẻ mở phần thân và đặt nó vào mã màu lục số 800000, như được hiển thị dưới đây.
Tuy nhiên, thuộc tính này đã bị loại bỏ trong phiên bản mới nhất của HTML và được thay thế bằng một lựa chọn tốt hơn nhiều. Lựa chọn này là thuộc tính màu nền của CSS. Sử dụng tính năng này, bạn có thể thêm và thay đổi màu nền trên trang web.
Hãy tìm hiểu về cách bạn có thể thay đổi màu nền trong HTML.
- Thêm màu nền trong HTML
- Thay đổi màu nền trong HTML
- Thay đổi màu nền của phân đoạn
- Thêm độ trong cho màu nền
- Tạo màu nền gradient
- Câu hỏi thường được hỏi
Cách thêm màu nền trong HTML
Để thêm màu nền trong HTML, hãy sử dụng đặc tính màu nền của CSS. Đặt nó vào tên màu hoặc mã bạn muốn và đặt nó bên trong một thuộc tính phong cách. Sau đó, thêm thuộc tính phong cách này vào một yếu tố HTML, như bảng, tiêu đề, phân chia hoặc thẻ kéo dài.
Thêm màu nền có thể giúp một yếu tố nào đó nổi bật trên trang, làm cho nó dễ đọc hơn.
Bạn hãy tiến hành theo từng bước của quá trình này, sau đó tạo một bảng bằng HTML như một ví dụ.
1. Xác định yếu tố HTML mà bạn muốn thêm nền hoặc tạo nền
Kiểm tra mã HTML để xác định nguyên tố mà bạn muốn thay đổi. Nếu nó là header, hãy tìm thẻ mở <header>. Nếu nó là một khe hở, hãy tìm thẻ <div>.
Trong ví dụ này, đang tạo một bảng với thẻ <table >.
2. Chọn màu nền HTML
Bạn có rất nhiều mã màu HTML để lựa chọn.Ví dụ này, hãy tạo màu #33475b.
3. Thêm một thuộc tính phong cách vào thẻ mở
Tiếp theo, thêm thuộc tính phong cách vào thẻ mở của yếu tố. Với hướng dẫn này, chỉ màu nền của bảng cụ thể này mới thay đổi. Thay đổi sẽ không ảnh hưởng đến các yếu tố khác trên trang.
Đây là HTML với dòng CSS :.
Điều đó rất đơn giản, bây giờ hãy nhìn vào những gì cần làm nếu bạn muốn đặt màu nền của nhiều yếu tố trên một trang.
Cách để thay đổi màu nền trong HTML
Giả sử bạn đặt màu nền của toàn bộ trang web thành một màu và muốn thay đổi màu nền của một yếu tố cụ thể thành màu khác, Tin tốt là quá trình thay đổi màu nền của một nguyên tố gần như giống hệt với quá trình thêm nó vào.
Bạn có thể dùngline CSS để thực hiện điều này, nhưng hãy sử dụng nhiều phong cách của CSS trong ví dụ dưới đây, hãy tiến hành từng bước một.
1. Tìm trình chọn CSS cơ bản
Thay vì thêm thêm chữ CSS này vào thẻ nội dung của tập tin HTML, hãy thêm vào bằng cách sử dụng trình lựa chọn chữ CSS, tìm nó trong mã CSS của trang web.
2. Thay đổi màu nền cơ thể
Tiếp theo, hãy thay đổi màu nền của toàn bộ trang web bằng tính năng màu nền.
Đây là CSS :.
Đây là kết quả :.
Nếu đây là CSS duy nhất, thì mọi thứ trên trang sẽ có nền màu xanh nhạt tương tự. Tiếp theo, chúng ta sẽ thêm thêm dòng chữ CSS để thay đổi màu nền của bảng.
3. Thêm dòng CSS để thay đổi màu nền của các yếu tố cụ thể
Nếu chúng ta muốn thay đổi màu nền của bảng, chúng ta có thể sử dụng CSS để nhắm vào yếu tố đó.
Đây là thẻ mở với dòng CSS :.
Đây là kết quả :.
Cách thay đổi màu nền của bộ chia
A div là một yếu tố container thường được sử dụng để chỉ định các phần khác nhau của một trang web.
Thay đổi màu nền của một chia sẽ giống như thay đổi màu nền của nội dung trang web của bạn.
Thông thường, một trang web sẽ có nhiều lằn. trong hướng dẫn này, bạn chỉ nên thay đổi một lằn.
Hãy trải qua quá trình từng bước một.
Tóm Tắt
1. Thêm lớp CSS vào khoảng trống mà bạn muốn thay đổi
Đầu tiên, tìm khoảng trống trong mã HTML của bạn và thêm một lớp vào thẻ mở.Một lớp vào một phần tử sẽ cho phép bạn chỉ thay đổi phần tử đó.
Nó trông như thế này :.
Thêm trình chọn lớp mới vào mã CSS của bạn
Tiếp theo, chuyển sang mã CSS và thêm trình chọn lớp mới, bên trong các dấu ngoặc, bao gồm tính năng màu nền.
Nó trông như thế này :.
3. Chọn màu nền mới
Tiếp theo, chọn màu nền CSS cho tính năng màu nền của bạn Chúng tôi đã chọn rgb ( 255, 122, 89 ).
Đây là những gì mã đó trông như thế này :.
Đây là kết quả :.
Tất cả đã xong rồi, anh đã thay đổi nền của một khoảng trống trên trang web của anh.
Cách thêm độ trong vào màu nền HTML
Khi thay đổi màu nền trong HTML, bạn sẽ bị giới hạn trong màu rắn. Bạn có thể thay đổi độ mờ và độ trong để tạo ra các hiệu ứng thị giác thú vị.
Để làm điều đó, bạn sẽ sử dụng tài sản độ mờ trong CSS.
Thuộc tính tối tăm của CSS là gì?.
Thuộc tính độ mờ của CSS được thêm vào một yếu tố HTML ( như một div hoặc một bảng ) hoặc một thuộc tính CSS ( như một lớp ) để làm cho các yếu tố đó một phần hoặc hoàn toàn trong suốt, Giá trị của tài sản này dao động từ 0 đến 1, với 0 hoàn toàn trong suốt và 1 hoàn toàn mờ đục.
Đối với hướng dẫn này, hãy sử dụng hai nút như một ví dụ.Để đi qua quá trình thêm tính minh bạch từng bước một.
1. Nhận biết các yếu tố HTML mà bạn muốn làm trong suốt
Nếu bạn đã biết điều bạn muốn thay đổi, hãy tiến hành và tìm nó trong mã HTML của bạn.
Trong hướng dẫn này, chúng ta có hai nút bootstrap cạnh nhau. Chúng tôi muốn du khách nhấp vào nút gửi và không nhấp vào nút không cảm ơn.
Đây là HTML :.
Chúng ta muốn giảm độ mờ của thứ sau để làm cho nó dường như bị vô hiệu hoá và kích hoạt ít click hơn.
Để đạt được kết quả này, hãy sử dụng đặc tính độ mờ của CSS sau khi thêm lớp vào nút thay đổi.
2. Thêm lớp học vào yếu tố mà bạn muốn thay đổi
Tiếp theo, hãy gắn thêm lớp CSS vào nút thứ hai để phân biệt nó với nút thứ nhất.
Vâng, hãy thêm lớp Btn – Secondary vào nút chúng ta muốn đánh dấu.
Nó trông như thế này :.
3. Thêm bộ chọn lớp vào mã CSS và áp dụng tính năng độ mờ
Bây giờ bạn đã tạo lớp mới, đến lúc thêm nó vào mã CSS của bạn.
Để làm cho nút thứ hai 40% xuyên suốt, hãy dùng nút. Btn-secondary class selector áp dụng thuộc tính độ mờ. Sau đó, đặt mức độ mờ tối lên 0. 4.
Đây là CSS :.
Đây là kết quả :.
Có thể bạn đã nhận thấy chúng tôi không cần sử dụng đặc tính màu nền của CSS vì chúng tôi đã sử dụng các lớp sửa đổi mặc định của Bootstraps.
Tìm hiểu thêm về Bootstrap trong The Ultimate Guide to Bootstrap CSS.
Cách tạo độ phân phối màu nền HTML
Để có thêm tuỳ chọn phong cách, bạn có thể tạo nền gradient. Đây là một hình ảnh đặc biệt thường hiển thị một màu dần dần thay đổi sang màu khác theo một hướng nhất định như từ trên xuống dưới, từ trái sang phải, hoặc theo đường chéo.
Chúng được gọi là gradient tuyến tính để tạo ra gradient tuyến tính, bạn phải xác định ít nhất hai điểm dừng màu.
Hãy nhìn vào bốn ví dụ nhanh bên dưới.
Bài hướng dẫn độ tuyến tính – Từ trên xuống dưới
Giả sử bạn muốn màu nền chuyển từ màu trắng ở phía trên màn hình sang màu xanh ở phía dưới màn hình.
Sử dụng bộ chọn CSS phần thân, bạn sẽ áp dụng các đặc tính phong cách độc đáo vào phần thân của trang web.Điều này trông như thế nào từ đầu đến cuối.
- Bước 1 : Tìm trình chọn phần thân trong mã CSS
- Bước 2 : Có thể cơ thể bạn đã có đặc tính màu nền. Xoá nó đi. Thay vì sử dụng tài sản màu nền, bạn sẽ sử dụng tài sản ảnh nền
- Bước 3 : Đặt tính năng linear-gradient và chỉ định hai điểm dừng màu trong ngoặc ngoặc, đây là cú pháp :
- Bước 4 : Tiếp theo, bạn muốn đặt độ cao các yếu tố HTML lên 100% để đảm bảo ảnh này chiếm toàn bộ màn hình
Tất cả cùng nhau, đây là CSS :.
Đây là HTML ( bao gồm các thẻ nội dung ) :.
Đây là kết quả :.
Phấn độ thẳng – Từ trái sang phải
Không có hướng được chỉ định cho gradient tuyến tính ở trên, đó là vì từ trên xuống dưới là hướng mặc định.
Nếu bạn muốn chỉ định một hướng khác, bạn sẽ thêm nó vào ngoặc ngoặc trước khi màu dừng lại.
Đây là CSS cho ví dụ trên, được viết lại để gradient được thuận trái phải.
Đây là HTML :.
Đây là kết quả :.
Góc độ tuyến tính 45
Nếu tôi muốn gradient đi theo đường chéo, tôi có thể dùng các từ khoá ở dưới bên phải, dưới bên trái, trên bên phải hoặc trên bên trái. Nếu muốn kiểm soát tốt hơn về hướng của gradient, bạn có thể dùng các góc thay vì các từ khoá.
Lưu ý rằng giá trị 0 độ tương đương với từ khoá “to top “, 90 độ tương đương với ” sang phải “, và 180 độ tương đương với ” xuống dưới “.
Nếu tôi muốn gradient đi lên phía trên bên phải, ví dụ, tôi có thể đặt hướng đến 45deg.
Đây là CSS :.
Đây là HTML :.
Đây là kết quả :.
Đường thẳng – Dừng nhiều màu
Để tạo một gradient tuyến tính, bạn cần tối thiểu hai chấm màu. Nhưng không có tối đa, có nghĩa là anh có thể dùng nhiều như anh muốn. Dưới đây là một ví dụ với bốn điểm dừng màu.
Đây là CSS :.
Đây là HTML :.
Đây là kết quả :.
Câu hỏi thường gặp : Thay đổi màu nền trong HTML
Vẫn còn câu hỏi, chúng tôi có câu trả lời cho anh.
Làm sao để thay đổi màu nền văn bản trong HTML?
Bạn có thể thay đổi màu nền của văn bản bằng cách thêm một thuộc tính màu nền vào đoạn văn ( p ) hoặc tiêu đề ( H 1, H 2, H 3… ).
Thêm tài sản này thông qua dòng CSS hoặc trên trang web của bạn bằng mã CSS.
Màu nền mặc định của HTML là gì?
Màu nền mặc định trong HTML là trong suốt.
Làm sao để tạo màu nền trong suốt?
Bạn có thể tạo màu nền hoàn toàn hoặc một phần trong suốt bằng cách sử dụng mã màu RGBA để xác định thuộc tính màu nền.
Sau đây là hình ảnh của ứng dụng CSS :.
Giá trị cuối cùng xác định độ trong.Để chắc rằng nó được đặt vào 0 nếu bạn muốn màu hoàn toàn vô hình.
Làm sao để loại bỏ màu nền trong HTML?
Bạn có thể xoá hết màu nền bằng cách thiết lập tính năng màu nền trong suốt.
Sau đây là hình ảnh của ứng dụng CSS :.
Thay đổi màu nền của bạn bằng HTML & CSS
Sử dụng HTML và CSS, bạn có thể thêm màu nền vào trang web hoặc các yếu tố khác nhau trên trang. Màu nền này có thể là chất rắn, trong suốt hoặc màu sắc phụ thuộc vào phong cách mà bạn thích. Kiến thức thiết kế cơ bản này có thể giúp bạn tuỳ biến trang web của mình và khiến nội dung dễ đọc và hấp dẫn hơn.
Lưu ý của biên tập viên : Bài viết này ban đầu được xuất bản vào tháng 9 năm 2020 và đã được cập nhật về độ toàn diện.
