post-image

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

Tổng quan

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

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”

Xem trang Sử dụng màu sắc trong trang web để nắm rõ hơn về các cách sử dụng màu.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

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:

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 ả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.
Last modified: Wednesday, 6 November 2019, 6:30 PM

Leave a Reply

Your email address will not be published. Required fields are marked *