CSS Backgrounds

CSS background-color

Thuộc tính background-color chỉ định màu nền của một element.

Ví dụ

body {    background-color: lightblue;  }

Với CSS, một màu thường được chỉ định bởi:

• Tên màu - ví dụ như "red"
• Giá trị HEX - ví dụ như "# ff0000"
• Giá trị RGB - ví dụ như "rgb (255,0,0)"

Bạn có thể đặt màu nền cho bất kỳ element HTML nào:

h1 {    background-color: green;  }    div {    background-color: lightblue;  }    p {    background-color: yellow;  }

Opacity / Transparency

Thuộc tính opacity chỉ định độ mờ đục / trong suốt của một element. Nó có thể nhận giá trị từ 0.0 - 1.0. Giá trị càng thấp, thì càng mờ:

div {    background-color: green;    opacity: 0.3;  }

Transparency với RGBA

Nếu bạn không muốn áp dụng độ mờ cho các element con, như trong ví dụ của chúng tôi ở trên, hãy sử dụng các giá trị màu RGBA.

Ví dụ sau đặt độ mờ cho màu nền chứ không phải cho văn bản:

div {    background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */  }

CSS background-image

Thuộc tính background-image chỉ định một hình ảnh để sử dụng làm nền của một element. Theo mặc định, hình ảnh được lặp lại để nó bao phủ toàn bộ element.

Ví dụ

body {    background-image: url("paper.gif");  }

background-image cũng có thể được đặt cho các phần tử cụ thể, như <p> element:

p {    background-image: url("paper.gif");  }

CSS background-repeat

Theo mặc định, thuộc tính background-image lặp lại hình ảnh theo cả chiều ngang và chiều dọc. Một số hình ảnh chỉ nên được lặp lại theo chiều ngang hoặc chiều dọc, nếu không chúng sẽ trông kỳ lạ, như thế này:

body {    background-image: url("gradient_bg.png");  }

Nếu hình ảnh trên chỉ được lặp lại theo chiều ngang (background-repeat: repeat-x;), nền sẽ trông đẹp hơn:

body {    background-image: url("gradient_bg.png");    background-repeat: repeat-x;  }

CSS background-repeat: no-repeat

body {    background-image: url("img_tree.png");    background-repeat: no-repeat;  }

Trong ví dụ trên, hình nền được đặt ở cùng vị trí với văn bản. Chúng tôi muốn thay đổi vị trí của hình ảnh, để nó không làm xáo trộn văn bản quá nhiều.

CSS background-position

Thuộc tính background-position được sử dụng để chỉ định vị trí của hình nền.

body {    background-image: url("img_tree.png");    background-repeat: no-repeat;    background-position: right top;  }

CSS background-attachment

Thuộc tính background-attachment chỉ định xem hình nền sẽ cuộn hay được cố định (sẽ không cuộn với phần còn lại của trang):

body {    background-image: url("img_tree.png");    background-repeat: no-repeat;    background-position: right top;    background-attachment: fixed;  }

Chỉ định rằng hình nền sẽ cuộn với phần còn lại của trang:

body {    background-image: url("img_tree.png");    background-repeat: no-repeat;    background-position: right top;    background-attachment: scroll;  }

CSS background - Shorthand property

Để rút ngắn code, ta cũng có thể chỉ định tất cả các thuộc tính nền trong một thuộc tính duy nhất. Đây được gọi là thuộc tính shorthand.

Thay vì viết:

body {    background-color: #ffffff;    background-image: url("img_tree.png");    background-repeat: no-repeat;    background-position: right top;  }

Bạn có thể sử dụng thuộc tính shorthand:

body {    background: #ffffff url("img_tree.png") no-repeat right top;  }

Khi sử dụng thuộc tính viết tắt, thứ tự của các giá trị thuộc tính là:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Không quan trọng nếu một trong các giá trị thuộc tính bị thiếu, miễn là các giá trị khác theo thứ tự này. Lưu ý rằng chúng tôi không sử dụng thuộc tính background-attachment trong các ví dụ trên, vì nó không có giá trị.