NỘI DUNG BÀI VIẾT
Giới thiệu
Các thuộc tính về nền (CSS background) được sử dụng để xác định các hiệu ứng về nền của một phần tử. Bao gồm:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Màu nền trong CSS
Thuộc tính background-color chỉ định màu nền của một phần tử.
Màu nền của toàn bộ trang web được thiết lập bằng cách sử dụng thẻ <body>:
Trong CSS, một màu sắc thường được chỉ định bởi:
- một giá trị HEX – ví dụ: “#ff0000”
- một giá trị RGB – ví dụ: “rgb(255,0,0)”
- một tên màu sắc hợp lệ (bằng tiếng Anh) – ví dụ: “red”
Trong ví dụ dưới đây, <h1>, <p>, và các phần tử <div> có màu nền khác nhau:
Hình nền trong CSS
Thuộc tính background-image chỉ định một hình ảnh dùng để làm nền cho một phần tử.
Mặc định, hình nền sẽ lặp đi lặp lại để nó trải ra toàn bộ phần tử.
Hình nền cho một trang có thể được thiết lập như sau:
Dưới đây là một ví dụ về sự kết hợp tồi của văn bản và hình nền. Văn bản khó có thể đọc được:
Hình nền – lặp lại theo chiều ngang hoặc theo chiều dọc
Mặc định, thuộc tính background-mage lặp hình ảnh theo chiều ngang và theo chiều dọc. Nhưng trong một số trường hợp, chúng ta cần thiết lập để hình ảnh chỉ lặp lại theo chiều ngang hoặc chiều dọc để có được nền mong muốn. Chẳng hạn, trong trường hợp sau, nếu chúng ta để mặc định thì hình ảnh sẽ được lặp theo cả hai chiều, và kết quả là nền không đẹp như mong muốn:
Nếu chúng ta điều chỉnh để hình ảnh chỉ lặp theo chiều ngang thì hiệu ứng đạt được sẽ đẹp hơn.
Tương tự, chúng ta có thể sử dụng thuộc tính background-repeat với giá trị là repeat-y nếu muốn lặp hình nền theo chiều dọc.
Hình nền – Quy định vị trí ảnh và không lặp lại
Để hiển thị hình nền một lần duy nhất thì chúng ta cũng sử dụng thuộc tính background-repeat với giá trị là no-repeat.
Trong ví dụ trên, hình nền được hiển thị trong cùng một vị trí với các văn bản. Nếu chúng ta muốn thay đổi vị trí của ảnh thì có thể sử dụng thuộc tính background-position:
Hình nền – Cố định vị trí
Để quy định hình nền cố định (sẽ không di chuyển với phần còn lại của trang), chúng ta sử dụng thuộc tính background-attachment:
Hình nền – Thuộc tính rút gọn
Chúng ta có thể rút ngắn các đoạn mã bằng cách sử dụng một thuộc tính duy nhất để quy định tất cả các giá trị của nền. Thuộc tính rút gọn đó là background:
Khi sử dụng thuộc tính rút gọn, thứ tự của các giá trị tương ứng với các thuộc tính là:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
Chúng ta có thể bỏ qua giá trị của một số thuộc tính, nhưng cần phải tuân thủ thứ tự trên.
Kết luận
Qua đây là một số chia sẻ về CSS, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về CSS.
Các bạn có thể tham khảo các bài viết hay về CSS tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
