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.
Đăng nhận xét