Điều chỉnh màu nền và ảnh nền trong CSS

Điều chỉnh màu nền và ảnh nền trong CSS

Anh NguyễnBạn nghĩ gì về bài viết này?

Trong bài viết này, chúng ta sẽ tìm hiểu về cách điều chỉnh màu nền và ảnh nền trong CSS.

Các thuộc tính về nền (background) trong CSS đượ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:

Ả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 ả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:

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:

Chúng ta điều chỉnh để hình ảnh chỉ lặp theo chiều ngang:

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 ả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ị ả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:

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-color
  • background-image
  • background-repeat
  • background-attachment
  • background-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.

Cảm ơn bạn đã theo dõi bài viết!

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.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG

Bình luận