2:09 AM
Unknown
Nếu bạn dùng thẻ img thì người dùng có thể dễ dàng lưu lại file ảnh của bạn, nhưng nếu bạn không muốn họ lưu lại, bạn có thể dùng background-image để gây khó khăn cho người dùng.
- Cách sử dụng đơn giản
1
|
background-color: #006600;
|
|
2
|
background-color: green;
|
|
3
|
background-color: rgb(0, 102, 0);
|
|
4
|
background-color: transparent;
|
|
1
|
background-image: url(http://vannyneo.com/themes/vannyneo3/images/logo.png);
|
|
2
|
background-image: url(../images/logo.png);
|
|
1
|
background-position: left top; /*
Đặt ảnh ở vị trí trên cùng bên trái */
|
|
2
|
background-position: 50px -10px; /*
Đặt ảnh cách mép trái 50px và mép trên 10px */
|
|
3
|
background-position: 0% 50%; /*
Căn ảnh theo % */
|
|
4
|
background-position: center center; /*
Đặt ảnh ở chính giữa thẻ HTML */
|
|
1
|
background-repeat: repeat; /*
Lặp theo 2 chiều ngang và dọc - Giá trị mặc định */
|
|
2
|
background-repeat: repeat-y; /*
Chỉ lặp theo chiều dọc */
|
|
3
|
background-repeat: repeat-x; /*
Chỉ lặp theo chiều ngang */
|
|
4
|
background-repeat: no-repeat; /*
Không lặp */
|
|
1
|
background-image: url(bg.gif);
|
|
2
|
background-repeat: repeat-x;
|
|
3 background-attachment: fixed;
Cách sử dụng ngắn
|
1
|
background: color
image position attachment repeat;
|
|
2
|
background: #fff url(../images/bg.gif) left top scroll no-repeat;
|
|
1
|
background: url(../images/bg.gif) #fff no-repeat left top;
|
Có 5 tính chất chính của background mà bạn cần biết đó là:
·
background-color
: Đặt thuộc tính
màu nền
·
background-image
: Dùng ảnh làm màu
nền cho một element
·
background-position
: Ví trí của ảnh
·
background-repeat
: Tùy chỉnh ảnh
nền có lặp hay không, lặp kiểu nào...
·
background-attachment
: Đặt chế đố ảnh
nền scroll theo trang hoặc là ở vị trí cố định
background-image bạn có thể dùng một ảnh bất kỳ trên internet hoặc cùng
server để làm nền cho một element
Nếu bạn dùng thẻ img thì người dùng có thể dễ dàng lưu lại file
ảnh của bạn, nhưng nếu bạn không muốn họ lưu lại, bạn có thể dùng
background-image để gây khó khăn cho người dùng.
background-position giúp bạn đặt chính xác vị trí ảnh so với thẻ HTML
background-repeat Tùy chỉnh ảnh nền có lặp hay không, lặp kiểu nào. Các giá
trị chính của background-repeat:
background-attachment hẳn bạn ít thấy đoạn mã CSS này, chúng ta chỉ cần khai báo
khi bạn muốn giữ nguyên ảnh nền khi di chuyển thanh cuộn (tham khảo twitter)
Sau khi đã rõ các tính chất của background, thay vì việc phải
khai báo từng tính chất, bạn có thể khai báo thuộc tính background của một thẻ
HTML như sau:
Thông thường tôi sử dụng:
Tất cả các trình duyệt đều hiểu được các cách sử dụng này
Posted in
0 comments :
Post a Comment