Trong bài học này chúng ta sẽ được học về cách định dạng màu
nền/ảnh nền cho một trang web cũng như các kỹ thuật định vị, điều chỉnh ảnh
nền khi dùng
CSS.
1. Màu nền (thuộc tính
background-color):
Thuộc tính background-color giúp
định màu nền cho một thành phần trên trang web. Các giá trị mã màu của
background-color cũng giống như color nhưng có thêm giá trị transparent để tạo
nền trong suốt.
Ví dụ sau đây sẽ chỉ cho chúng ta biết cách sử dụng
thuộc tính background-color để định màu nền cho cả trang web, các thành phần
h1, h2 lần lượt là xanh lơ, đỏ và cam.
body {
background-color:cyan
}
h1 {
background-color:red
} h2 { background-color:orange
}
2. Ảnh nền (thuộc tính
background-image):
Việc sử dụng ảnh nền
giúp trang web trông sinh động và bắt mắt hơn. Để chèn ảnh nền vào một thành
phần trên trang web chúng ta sử dụng thuộc tính background-image.
Simple
CSS Standard Edition
WallPearl
Bây giờ chúng ta sẽ cùng làm một
ví dụ minh họa để xem thuộc tính background-image sẽ hoạt động ra sao.
Mình sẽ lấy logo Ngoại Thương
Sau đó, chúng ta sẽ viết CSS để đặt logo này làm ảnh
nền trang web như sau: body { background-image:url(logo.png)
}
h1 {
background-color:red
}
h2 {
background-color:orange
} p { background-color: FDC689
}
Như các bạn đã thấy chúng ta sẽ
phải chỉ định đường dẫn của ảnh trong cặp ngoặc đơn sau url. Do ảnh đặt trong
cùng thư mục với file style3.css nên chúng ta chỉ cần ghi abc.jpg. Nhưng nếu
chúng ta tạo thêm một thư mục img trong thư mục thì chúng ta sẽ phải ghi là
background-image:url(img/abc.jpg). Đôi khi nếu không chắc lắm bạn có thể dùng
đường dẫn tuyệt đối cho ảnh.
3. Lặp lại ảnh nền
(thuộc tính background-repeat):
Nếu sử dụng một ảnh có kích thước
quá nhỏ để làm nền cho một đối tượng lớn hơn thì theo mặc định trình duyệt sẽ
lặp lại ảnh nền để phủ kín không gian còn thừa. Thuộc tính background-repeat
cung cấp cho chúng ta các điều khiển giúp kiểm soát trình trạng lặp lại của ảnh
nền. Thuộc tính này có 4 giá trị
+ repeat-x: Chỉ lặp lại ảnh theo phương ngang.
+ repeat-y: Chỉ lặp lại ảnh theo phương dọc.
+ repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc
định.
+ no-repeat: Không lặp lại ảnh.
Bây giờ, chúng ta hãy thêm thuộc tính
background-repeat này vào ví dụ trên thử xem sao. body
{
background-image:url(logo.png); background-repeat:no-repeat;
}
Các bạn xem, có phải ảnh nền đã không bị lặp lại như trong
ví dụ trước, hãy thử thay đổi qua lại giữa các giá trị và xem kết quả tạo ra.
4. Khóa ảnh nền (thuộc
tính background-attachment):
Background-attachment
là một thuộc tính cho phép bạn xác định tính cố định của ảnh nền so với với nội
dung trang web. Thuộc tính này có 2 giá trị:
+ scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là
giá trị mặc định.
+ fixed: Cố định ảnh nền so với nội dung trang web. Khi áp
dụng giá trị này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web.
5. Định vị ảnh nền
(thuộc tính background-position):
Theo mặc định ảnh nền khi được chèn
sẽ nằm ở góc trên, bên trái màn hình. Tuy nhiên với thuộc tính
background-position bạn sẽ có thể đặt ảnh nền ở bất cứ vị trí nào (trong không
gian của thành phần mà nó làm nền).
Background-position sẽ dùng một cặp
2 giá trị để biểu diễn tọa độ đặt ảnh nền. Có khá nhiều kiểu giá trị cho thuộc
tính position. Như đơn vị chính xác như centimeters, pixels, inches,… hay các
đơn vị qui đổi như %, hoặc các vị trí đặt biệt như top, bottom, left,
right.
Simple
CSS Standard Edition
WallPearl
Ví dụ:
Giá trị
|
Ý nghĩa
|
Background-position:5cm 2cm
|
Ảnh được định vị 5cm từ trái qua và 2cm từ trên xuống.
|
Background-position:20% 30%
|
Ảnh được định vị 20% từ trái qua và 30% từ trên xuống.
|
Background-position:bottom
left
|
Ảnh được định vị ở góc trái
phía dưới
|
* Thuộc tính background rút gọn
Khi sử dụng quá nhiều thuộc tính
CSS sẽ gây khó khăn cho người đọc, công tác chỉnh sửa cũng như tốn nhiều dung
lượng ổ cứng cho nên CSS đưa ra một cấu trúc rút gọn cho các thuộc tính cùng
nhóm. Ví dụ: Chúng ta có thể nhóm lại
đoạn CSS sau
background-color:transparent;
background-image: url(logo.png); background-repeat: no-repeat;
background-attachment: fixed;
background-position: right
bottom;
thành một dòng ngắn gọn:
background:transparent url(logo.png) no-repeat fixed
right bottom;
Từ ví dụ trên chúng ta có thể khái quát cấu trúc rút gọn cho
nhóm background:
background:<background-color> |
<background-image> | <background-repeat> |
<background-attachment> | <background-position>
Theo mặc định thì các thuộc tính không được đề cập sẽ nhận
các giá trị mặc định.
Ví dụ: Chúng ta sẽ bỏ qua hai thuộc tính
background-attachment và backgroundposition ở dòng mã trên đi:
background:transparent
url(logo.png) no-repeat;
Hai thuộc tính không được chỉ định sẽ đơn thuần được thiết
lập tới giá trị mặc định mà chúng ta điều biết là scroll và top left.
0 nhận xét:
Đăng nhận xét