Bài viết sau đây sẽ cung cấp mọi thứ bạn cần biết về cách thay đổi màu nền bằng CSS.
1. Các bước thực hiện
Bạn có thể thay đổi màu nền bằng CSS theo các bước dưới đây.
Lưu ý: Bạn nên sử dụng Visual Studio Code với tiện ích mở rộng Live Server để xem các thay đổi trong thời gian thực khi cập nhật HTML và CSS.
- Tạo một thư mục cho các tệp dự án của bạn.
- Tạo tệp index.html để chứa HTML của bạn. Bạn có thể sử dụng code soạn sẵn hoặc chỉ thiết lập một số thẻ <html>, <head> và <body>.
- Tạo tệp styles.css cho CSS của bạn.
- Liên kết tệp CSS của bạn với HTML bằng cách đặt <link rel=”stylesheet” href=”styles.css”> bên trong thẻ <head>.
Bây giờ bạn đã sẵn sàng để bắt đầu chỉnh sửa CSS.
>>> Đọc ngay: Hướng dẫn cơ bản về CSS cho người mới bắt đầu
2. Cách thay đổi màu nền bằng CSS
Cách đơn giản nhất để thay đổi màu nền là chỉnh sửa thẻ body . Sau đó, chỉnh sửa thuộc tính background-color. Bạn có thể tìm mã màu bằng cách tìm kiếm và sử dụng tiện ích mở rộng Color Picker của Google.
body {
background-color: rgb(191, 214, 255);
}
Mã này thay đổi nền thành một màu xanh nhạt đẹp mắt.
Thuộc tính background-color chấp nhận các màu ở sáu dạng khác nhau:
- tên: lightskyblue; (để gần đúng)
- mã hex: # bfd6ff;
- rgb: rgb (191, 214, 255);
- rgba: rgba (191, 214, 255, 1); trong đó a là alpha (opacity/độ mờ đục)
- HSL: hsl (218 °, 100%, 87%);
- HSLA: hsla (218 °, 100%, 87%, 1); trong đó a là alpha (opacity/độ mờ đục)
Bạn có thể sử dụng thuộc tính background thay cho màu nền để cắt bớt code. Bạn có thể thay đổi màu nền của bất kỳ phần tử HTML nào bằng phương pháp này.
Tạo một phần tử <div> và tạo cho nó một lớp — trong trường hợp này, lớp là panel. Đặt thuộc tính height và width của nó trong CSS. Chọn phần tử trong CSS và tô màu.
body {
background-color: rgb(191, 214, 255);
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.panel {
background: rgb(255, 148, 148);
height: 10rem;
width: 30%;
}
.muo-text {
font-size: 3em;
font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;
}
Tại đây, bạn có thể thấy thuộc tính body background được style độc lập với thuộc tính panel background.
Thuộc tính background cũng chấp nhận màu gradient (sự pha trộn một phần của nhiều màu sắc với nhau, ở nơi giao màu tạo ra hiệu ứng mượt mà, liền mạch):
body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}
3. Cách thay đổi hình nền trong CSS
Nếu bạn muốn nền là một hình ảnh chứ không phải là một màu đồng nhất hoặc gradient? Bạn có thể chỉnh sửa thuộc tính background.
Đảm bảo rằng hình ảnh nằm trong cùng một thư mục với các tệp HTML và CSS của bạn. Nếu không, bạn sẽ phải sử dụng đường dẫn tệp bên trong dấu ngoặc đơn thay vì chỉ sử dụng tên:
body {
background: url(leaves-and-trees.jpg)
}
Có vẻ như hình ảnh được phóng to quá mức. Bạn có thể khắc phục điều đó bằng thuộc tính background-size.
body {
background: url(leaves-and-trees.jpg);
background-size: cover;
}
Để sử dụng thuộc tính background cùng với cover thuộc tính background-size, bạn cũng phải chỉ định thuộc tính background-position và phân tách các giá trị bằng dấu gạch chéo ngược (ngay cả khi chúng là giá trị vị trí mặc định chẳng hạn như top left)
body {
background: url(leaves-and-trees.jpg) top left / cover;
}
Như vậy hình nền đã có kích thước phù hợp trong một dòng CSS.
Lưu ý : Hãy thận trọng với việc dùng các hình nền lớn chiếm nhiều dung lượng lưu trữ. Những hình này có thể khó tải trên thiết bị di động, nơi bạn thường có tất cả hai giây để cung cấp cho người dùng lý do để ở lại trang.
>>> Đọc ngay: 3 phương pháp căn giữa hình ảnh với CSS dễ dàng
4. Nâng cấp trình độ CSS của bạn với CSS box-shadow
Đối với một nhà phát triển web thành thạo, các thuộc tính màu nền và hình ảnh nền đã quá quen thuộc. May mắn thay, luôn có một cái gì đó mới để học hỏi.
Hãy thử làm đẹp các hộp của bạn bằng CSS box-shadow. Các phần tử HTML của bạn chưa bao giờ đẹp hơn!
>>> Nếu bạn đang có nhu cầu tìm hiểu về khóa học lập trình đi làm ngay. Hãy liên hệ với FUNiX ngay tại đây:
>>> Xem thêm chuỗi bài viết liên quan:
10 ví dụ mã CSS mà bạn có thể học trong 10 phút
Cách tạo Mẫu F và Z bằng HTML và CSS
8 mẹo và thủ thuật CSS mọi lập trình viên nên biết
10 mẫu nền CSS bạn có thể sử dụng trên trang web của mình
Vân Nguyễn
Dịch từ: https://www.makeuseof.com/css-background-color/
Bình luận (0
)