Cách chỉnh background-image trong css
1) Thuộc tính background-image trong CSS- Thuộc tính background-image dùng để thiết lập "hình nền" cho phần tử. Show
- Ví dụ: Phần tử này có nền là hình các bông hoa - Lưu ý: Đối với một phần tử HTML, phần diện tích được thiết lập hình nền sẽ bao gồm các thành phần:
2) Cách sử dụng thuộc tính background-image trong CSS- Để sử dụng thuộc tính background-image, ta dùng cú pháp như sau:
- Ta thấy giá trị của thuộc tính background-image có thể được xác định bởi một trong bốn loại:
3) Một số kỹ thuật cần quan tâm- Chúng ta có hai kỹ thuật dùng để thiết lập hình nền cho phần tử cần phải quan tâm:
3.1) Sử dụng nhiều hình ảnh để thiết lập hình nền cho phần tử- Việc thiết lập hình nền cho phần tử không phải chỉ có thể sử dụng duy nhất một tấm hình, ta có thể dùng nhiều tấm hình bằng cách sử dụng nhiều giá trị url() (tấm hình nào được khai báo trước thì nó sẽ nằm đè lên tấm hình sau)
Xem ví dụ - Lưu ý: Việc sử dụng nhiều tấm hình để thiết lập hình nền cho phần tử chỉ thích hợp khi các tấm hình đó thuộc định dạng GIF hoặc PNG (loại hình ảnh mà có một số vị trí trong suốt). Nếu sử dụng loại hình không có phần trong suốt thì nó sẽ nằm đè hoàn toàn lên tấm hình bên dưới, khiến tấm hình bên dưới không được hiển thị.
Xem ví dụ 3.2) Hình nền kết hợp với màu nền- Nếu bạn thiết lập hình nền cho phần tử bằng loại hình ảnh có một số vị trí trong suốt, thì khi đó bạn có thể sử dụng kết hợp với thuộc tính background-color để chèn màu nền vào những vị trí trong suốt, làm tăng tính sắc sảo cho nền của phần tử.
Xem ví dụ 4) Giới thiệu sơ qua về "sự lặp lại của hình nền"- Mặc định, hình nền sẽ xuất phát từ vị trí góc "phía trên - bên trái" của phần tử. - Nếu hình ảnh dùng để làm hình nền cho phần tử có kích thước nhỏ hơn kích thước của phần tử thì hình nền sẽ tự động được lặp lại để lấp đầy diện tích của phần tử (Xem ví dụ) - Chúng ta có thể thiết lập việc lặp lại của hình nền (lặp, không lặp, chỉ lặp theo chiều ngang, chỉ lặp theo chiều dọc, ...) bằng cách sử dụng thuộc tính background-repeat trong CSS. Hình nền là gì !? - Hình nền là hình nằm bên dưới phần tử (dùng để làm nền cho phần tử) - Các nội dung của phần tử sẽ hiển thị đè lên hình nền. - Ví dụ như phần tử này có hình nền là hai bố con nhà mèo đang ôm nhau ngủ. 1) Cách thiết lập hình nền cho phần tử- Để thiết lập hình nền cho một phần tử thì chúng ta cần phải thiết lập thuộc tính background-image cho phần tử đó với cú pháp như sau:
- Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:
- Lưu ý: Chúng ta có thể gán nhiều giá trị url() cho thuộc tính background-image để hòa trộn nhiều tập tin hình ảnh lại với nhau (Xem ví dụ) - Tuy nhiên, việc sử dụng nhiều tấm hình để thiết lập hình nền cho phần tử chỉ thích hợp khi các tấm hình đó có định dạng là GIF hoặc PNG (loại hình ảnh có một số vị trí trong suốt). Nếu sử dụng loại hình không có phần trong suốt thì nó sẽ nằm "đè hoàn toàn" lên tấm hình bên dưới, khiến tấm hình bên dưới không được hiển thị (Xem ví dụ) 2) Điều chỉnh phạm vi được thiết lập hình nền- Trong các bài học trước thì tôi đã có giới thiệu sơ qua với các bạn về cấu trúc của một phần tử HTML rồi, nó bao gồm bốn thành phần chính: margin border padding content - Khi chúng ta sử dụng thuộc tính background-image để thiết lập hình nền cho phần tử thì mặc định phạm vi được thiết lập hình nền sẽ bắt đầu từ phần border cho đến hết phần content - Tuy nhiên, với việc sử dụng thuộc tính background-clip thì chúng ta có thể điều chỉnh lại phạm vi được thiết lập hình nền của phần tử.
- Trong đó, value có thể được xác định dựa theo một trong các giá trị sau đây:
3) Tùy chỉnh cách thức "lặp lại" của hình nền- Khi chúng ta thiết lập hình nền cho một phần tử, nếu tấm hình được dùng làm hình nền có kích thước nhỏ hơn kích thước của phần tử thì mặc định tấm hình sẽ "tự động lặp lại" để lấp đầy phần tử. - Tuy nhiên, với việc sử dụng thuộc tính background-repeat thì chúng ta có thể tùy chỉnh việc lặp lại của hình nền (chẳng hạn như chỉ lặp lại theo chiều ngang, chiều dọc, hoặc không lặp lại, . . . .)
- Trong đó, value có thể được xác định dựa theo một trong sáu loại giá trị:
4) Thay đổi "vị trí gốc" trong việc thiết lập hình nền- Vị trí gốc là vị trí xuất hiện của tấm hình gốc (tấm hình gốc là tấm hình được dùng làm tâm điểm trong việc lặp lại của hình nền, nó cũng chính là hình nền khi chúng ta chỉnh chế độ không lặp lại) - Mặc định thì vị trí gốc sẽ nằm ở ngay góc phía trên bên trái của phần padding, tuy nhiên chúng ta có thể thay đổi bằng cách sử dụng thuộc tính background-origin với cú pháp như sau:
- Trong đó, value có thể được xác định dựa theo một trong năm loại giá trị:
5) Thiết lập vị trí của hình nền- Khi chúng ta thiết lập hình nền cho một phần tử, mặc định hình nền sẽ nằm ở ngay vị trí gốc. Nếu muốn thiết lập lại vị trí cho hình nền thì chúng ta cần phải sử dụng thuộc tính background-position với cú pháp như sau:
- Trong đó, value có thể được xác định dựa theo một các loại giá trị sau đây:
6) Chỉnh kích thước của hình nền- Khi chúng ta thiết lập hình nền cho một phần tử thì mặc định hình nền sẽ có kích thước bằng với kích thước của tấm hình được dùng làm hình nền (Xem ví dụ). Nếu muốn thiết lập lại kích thước cho hình nền thì chúng ta cần phải sử dụng thuộc tính background-size với cú pháp như sau:
- Trong đó, value có thể được xác định dựa theo một các loại giá trị bên dưới:
7) Tùy chỉnh cách thức hiển thị của hình nền
- Mặc định thì hình nền sẽ bị cuốn đi khi người dùng kéo thanh scroll, nếu muốn thiết lập lại cách thức hiển thị của hình nền thì chúng ta phải sử dụng thuộc tính background-attachment với cú pháp như sau:
- Trong đó, value có thể được xác định dựa theo một trong năm loại giá trị:
|