Phông Nền (background) trong CSS
Các thuộc tính về phông nền (background) trong CSS được sử dụng để thiết lập hiệu ứng phông nền cho phần tử HTML trên trang web
Các thuộc tính dùng để thiết lập phông nền trong CSS gồm có:
-
Thuộc tính
background-color
: Thiết lập màu nền. -
Thuộc tính
background-image
: Thiết lập ảnh nền. -
Thuộc tính
background-repeat
: Thiết lập kiểu hiển thị lặp lại cho ảnh nền. -
Thuộc tính
background-position
: Thiết lập vị trí hiển thị của ảnh nền. -
Thuộc tính
background-attachment
: Thiết lập kiểu attache của ảnh nền khi hiển thị. -
Thuộc tính
background
: Thiết lập phông nền (màu nền hoặc ảnh nền, cách hiển thị lặp lại, vị trí hiển thị) tuỳ vào cú pháp sử dụng.
Thuộc Tính background-color
Thuộc tính background-color
được sử dụng để thiết lập màu nền cho phần tử HTML.
Đoạn mã CSS dưới đây sử dụng thuộc tính background-color
để thiết lập màu nền cho phần tử body
trên trang:
body {
background-color: orange;
}
Giá trị của thuộc tính này có thể là một màu theo tên hoặc giá trị màu theo RGB hoặc HEX... như tìm hiểu ở bài học về màu trong CSS.
Thuộc Tính background-image
Thuộc tính background-image
trong CSS được sử dụng để thiết lập ảnh nền cho phần tử HTML trên trang.
Đoạn mã CSS dưới đây sử dụng thuộc tính background-image
để thiết lập màu nền cho phần tử body
trên trang:
body {
background-image: url("https://i.imgur.com/wzPwquG.jpg");
}
Giá trị của thuộc tính này là một địa chỉ URL tham chiếu tới hình ảnh và được đặt bên trong url("...")
. Địa chỉ URL sử dụng có thể là tuyệt đối như ở ví dụ trên hoặc tương đối.
Thuộc Tính background-repeat
Thuộc tính background-repeat
được sử dụng để thiết lập kiểu lặp lại cho ảnh nền của phần tử. Thuộc tính này chỉ nên được áp dụng khi phần tử được thiết lập ảnh nền.
Đoạn code CSS dưới đây sử dụng thuộc tính background-repeat
để lặp lại ảnh nền thiết lập cho phần tử body
theo cả chiều ngang lẫn chiều dọc:
body {
background-image: url("https://i.imgur.com/yWcv2rH.gif");
background-repeat: repeat;
}
Để hiển thị lặp lại ảnh nền theo chiều ngang sử dụng giá trị repeat-x
cho thuộc tính này:
body {
background-image: url("https://i.imgur.com/yWcv2rH.gif");
background-repeat: repeat-x;
}
Để hiển thị lặp lại ảnh nền theo chiều dọc sử dụng giá trị repeat-y
cho thuộc tính này:
body {
background-image: url("https://i.imgur.com/yWcv2rH.gif");
background-repeat: repeat-y;
}
Với giá trị là no-repeat
ảnh nền sẽ không được lặp lại, đây cũng là kiểu lặp mặc định của ảnh nền:
body {
background-image: url("https://i.imgur.com/yWcv2rH.gif");
background-repeat: no-repeat;
}
Thuộc Tính background-position
Thuộc tính background-position
được sử dụng để thiết lập vị trí của ảnh nền:
body {
background-image: url("https://i.imgur.com/ElCH8XF.png");
background-repeat: no-repeat;
background-position: left bottom;
}
Thuộc Tính background-attachment
Thuộc tính background-attachment
được sử dụng để thiết lập kiểu trói buộc (attach) khi hiển thị của ảnh nền.
Đoạn code trong ví dụ dưới đây sẽ attach ảnh nền cố định trên trang:
body {
background-image: url("https://i.imgur.com/ElCH8XF.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Thuộc Tính background
Thuộc tính background
được sử dụng để thiết lập phông nền cho phần tử HTML bao gồm màu nền hoặc ảnh nền, vị trí ảnh nền, kiểu hiển thị lặp lại... tuỳ thuộc vào cú pháp sử dụng. Nó có thể thay thế cho tất cẩ các thuộc tính background-... đề cập ở trên.
Đoạn mã CSS dưới đây sử dụng thuộc tính background
để thiết lập màu nền cho phần tử body
trên trang:
body {
background: orange;
}
Đoạn mã CSS dưới đây sử dụng thuộc tính background
để thiết lập ảnh nền cho phần tử body
trên trang:
body {
background: url("https://i.imgur.com/wzPwquG.jpg");
}
Đoạn mã CSS dưới đây sử dụng thuộc tính background
để thiết lập ảnh nền, kiểu hiển thị lặp lại và vị trí của phông nền cho phần tử body
trên trang:
body {
background: url("https://i.imgur.com/wzPwquG.jpg") no-repeat left bottom;
}
- Posted by baobinhnet
- 2020-06-09 09:52:56