Bài đăng nổi bật


Các thuộc tính về nền (background) của CSS được sử dụng để xác định các hiệu ứng về nền của một phần tử.
Các thuộc tính CSS được sử dụng cho hiệu ứng nền:
  • 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 một trang được thiết lập như thế sau:
Ví dụ:
body {
background-color: #b0c4de;
}


Với 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 Các giá trị màu CSS bạn sẽ có một danh sách đầy đủ của các giá trị có thể dành cho màu sắc.
Trong ví dụ dưới đây, <h1>, <p>, và các phần tử <div> có màu nền khác nhau:
h1 {
background-color: #6495ed;
}

p  {
background-color: #e0ffff;
}

div {
background-color: #b0c4de;
}


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:
Ví dụ:
body {
background-image: url("paper.gif");
}

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:
Ví dụ:
body {
background-image: url("bgdesert.jpg");
}


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.
Một số hình ảnh chỉ nên lặp lại theo chiều ngang hoặc chiều dọc, nếu không trông chúng sẽ rất lạ lùng, ví dụ:
body {
background-image: url("gradient_bg.png");
}
Nếu hình ảnh lặp lại chỉ theo chiều ngang (background-repeat: repeat-x;), trông sẽ tốt hơn:
Ví dụ
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}


Hình nền - Thiết lập vị trí và không lặp lại

Hiển thị hình nền chỉ một lần cũng cũng được định nghĩa bởi thuộc tính background-repeat:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}

Trong ví dụ trên, hình nền được hiển thị trong cùng một vị trí như các văn bản. Chúng ta muốn thay đổi vị trí của hình ảnh, điều này sẽ làm nó không ảnh hưởng tới các văn bản quá nhiều.
Vị trí của của hình nền được chỉ định bởi thuộc tính background-position:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}


Hình nền - Cố định vị trí

Để chỉ đị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:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}


Nền - Rút gọn thuộc tính

Để rút ngắn các mã, mà vẫn xác định được tất cả các thuộc tính nền trong một thuộc tính duy nhất. Điều này được gọi là một rút gọn thuộc tính.
Thuộc tính rút gọn cho nền là background:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}

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
Sẽ không quan trọng nếu một trong các giá trị của thuộc tính nào đó bị thiếu, miễn là những giá trị khác theo thứ tự này.

Tự làm bài tập!


Post a Comment

Mới hơn Cũ hơn