Sử dụng CSS để đặt ảnh nền

• Có Thể 3, 2024

Bao giờ tự hỏi làm thế nào các trang web quản lý những thiết kế đẹp và hình ảnh nổi phía sau văn bản? Tất cả đều được thực hiện thông qua sự kỳ diệu của Cascading Style Sheets. CSS không chỉ cho phép bạn chỉ định một hình ảnh cho nền của trang, nó còn cho phép bạn điều chỉnh cách hiển thị hình ảnh - để bạn có thể có được giao diện bạn muốn.

Khối xây dựng cơ bản cho hình nền của bạn là, đủ phù hợp, thuộc tính 'hình nền'. Bạn sử dụng thuộc tính này để cho biết trang web của bạn nơi tệp hình ảnh được đặt, như sau:

thân hình {
hình nền: url ("image.gif");
}

Đó là tất cả những gì bạn cần làm để đặt một hình nền cho trang web của bạn. Tất nhiên, có lẽ bạn sẽ muốn tùy chỉnh cách hình ảnh xuất hiện. Giả sử bạn muốn hình ảnh của mình bắt đầu ở đầu trang nhưng được căn giữa theo chiều ngang thay vì căn lề trái (căn chỉnh mặc định). Trong trường hợp đó, bạn sẽ muốn thêm thuộc tính 'vị trí nền' vào quy tắc CSS của mình:

thân hình {
hình nền: url ("image.gif");
nền-vị trí: trung tâm hàng đầu;
}

Khi xác định thuộc tính 'vị trí nền', giá trị đầu tiên sẽ đặt căn chỉnh ngang (trái, giữa hoặc phải) và thứ hai đặt căn chỉnh dọc của hình ảnh (trên cùng, giữa hoặc dưới).

Tiếp theo, bạn quyết định rằng bạn muốn ngăn hình ảnh ốp lát (lặp lại chính nó) theo chiều ngang, mặc dù bạn muốn nó xếp theo chiều dọc. Đã đến lúc đưa ra thuộc tính 'lặp lại nền':

thân hình {
hình nền: url ("image.gif");
nền-vị trí: trung tâm hàng đầu;
lặp lại nền: lặp lại-y;
}

Đặt giá trị thành 'repeat-y' sẽ cho trình duyệt xếp hình nền dọc theo trục y, hay còn gọi là trục dọc, nhưng không phải là trục x (theo chiều ngang), đó chính xác là những gì chúng ta muốn. Nếu bạn muốn xếp nó theo chiều ngang nhưng không theo chiều dọc, bạn sẽ sử dụng giá trị 'repeat-x' thay thế; nếu bạn không muốn hình ảnh xếp chồng lên nhau, hãy đặt giá trị 'không lặp lại'. Giá trị mặc định là xếp hình ảnh theo chiều ngang và chiều dọc, vì vậy nếu đó là lựa chọn tốt nhất cho hình ảnh của bạn, bạn không cần phải đặt thuộc tính 'lặp lại nền'.

Cuối cùng, bạn có thể xem thuộc tính 'tệp đính kèm nền'. Theo mặc định, hình ảnh của bạn sẽ cuộn khi cuộn trang, vì vậy nếu bạn không lặp lại hình ảnh theo chiều dọc và bạn có một trang dài, hình ảnh của bạn sẽ không kéo dài đến cuối trang. Bạn có thể thay đổi điều này bằng cách đặt thuộc tính 'đính kèm nền' thành 'cố định', điều này làm cho hình nền ở cùng một vị trí trên màn hình bất kể trang cuộn như thế nào. Bây giờ quy tắc hình ảnh nền của bạn sẽ trông như thế này:

thân hình {
hình nền: url ("image.gif");
nền-vị trí: trung tâm hàng đầu;
lặp lại nền: lặp lại-y;
đính kèm nền: cố định;
}


Nếu bạn muốn giữ các quy tắc CSS của mình càng nhỏ càng tốt, bạn có thể kết hợp tất cả các giá trị nền của mình thành một dòng bằng cách sử dụng thuộc tính 'nền', như sau:

lý lịch {
url ("image.gif") lặp lại trung tâm cố định;
}

Khi sử dụng thuộc tính 'nền', bạn phải liệt kê các giá trị theo một thứ tự cụ thể:
[màu nền (nếu được sử dụng)] [hình nền] [lặp lại nền] [đính kèm nền] [vị trí nền]. Bạn có thể bỏ qua bất kỳ giá trị nào bạn không cần, bạn chỉ cần liệt kê bất kỳ giá trị nào bạn sử dụng theo đúng thứ tự hoặc quy tắc sẽ không hoạt động.

Video HướNg DẫN: 02 - Thêm background vào cho trang web (Có Thể 2024).