NTM Solutions

Facebook Youtube Google+

Thứ Sáu, 30 tháng 3, 2018

Tự học CSS - Bài 03 - Định dạng Background

Quay về mục lục TỰ HỌC CSS

Các thuộc tính background trong CSS gồm:
·         background-color
·         background-image
·         background-repeat
·         background-attachment
·         background-position

1.    background-color

Thiết lập màu nền của phần tử HTML
Ví dụ:
h1 {
    background-color
: green;
}

div
{
    background-color
: lightblue;
}

p
{
    background-color
: yellow;
}

2.    background-image

Xác định 01 tấm hình sẽ làm nền của đối tượng
Mặc định tấm hình sẽ được lặp lại cho đến khi nào lấp đầy toàn bộ đối tượng (cả chiều ngang và dọc)
Ví dụ:
Ở đây ta sẽ chọn 01 tấm hình nhỏ để thấy tấm hình được lặp lại lấp đầy nền trang web.
body {
    background-image
: url("hinh/linh.jpg");
}

3.    background-repeat

a.       Lặp hình nền theo chiều ngang
Ví dụ:
body {
    background-image
: url("hinh/linh.jpg");
    background-repeat
: repeat-x;
}
b.      Lặp hình nền theo chiều dọc
Ví dụ:
body {
    background-image
: url("hinh/linh.jpg");
    background-repeat
: repeat-x;
}
c.       Hình nền không lặp lại
Mặc định nếu hình nền không lặp lại sẽ được đặt ở vị trí left-top
Ví dụ:
body {
    background-image
: url("hinh/linh.jpg");
    background-repeat
: no-repeat;
}

4.    background-position

Không lặp lại hình nền và cố định ở 01 góc (trên?)
Ví dụ:
body {
    background-image
: url("hinh/linh.jpg");
    background-repeat
: no-repeat;
    background-position
: right top;
}

5.    background-attachment

Cố định hình nền không bị cuộn theo nội dung trang web khi người dùng cuộn lên hoặc cuộn xuống.
Ví dụ:
body {
    background-image
: url("hinh/linh.jpg");
    background-repeat
: no-repeat;
    background-position
: right top;
    background-attachment
: fixed;
}

6.    Viết tắt các thuộc tính background

Ta chỉ dùng mỗi chữ background để mô tả tất cả thuộc tính.
Ví dụ:
body {
    background
: #ffffff url("hinh/linh.jpg") no-repeat right top;
}
Các bạn có thể xem thêm video clip sau để hiểu rõ hơn:

Nguồn: Lớp học vi tính .COM