- 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 ảnh, ta có thể sử dụng nhiều tấm hình bằng cách sử dụng nhiều url giá trị[] [tấm hình nào được khai báo trước đó thì nó sẽ
Tài liệu học Lập Trình Web
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 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ẽ đảo ngược hoàn toàn lên tấm bên dưới, tấm bên dưới không được hiển thị
Tài liệu học Lập Trình Web
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 màu nền để thêm màu nền vào những vị trí trong suốt, làm
Tài liệu hướng dẫn học Lập Trình Web
Xem ví dụ4] Giới thiệu sơ lược 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 được sử 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 lặp lại của hình nền [lặp lại, không lặp lại, 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 lặp lại nền trong CSS
Đầu tiên là căn giữa chữ viết [TEXT]
Ví dụ. Chữ CAODEM. COM được căn giữa trang web
CAO ĐÊM. COM
CAODEM.COM
Mã css căn giữa các chữ viết như sau
.text{text-align: center;}
Căn giữa thẻ DIV
Ví dụ. Thẻ div màu đỏ bao quanh nội dung được căn giữa trong thẻ màu xanh
Nội dung
Mã css căn giữa thẻ DIV như sau
.cangiua{margin:0 auto}
Căn giữa hình ảnh [IMAGES]
Ví dụ. Logo Đêm Đêm được căn giữa trang
2. Giãn các hình ảnh với object-fit
chứa, bao gồm, điền vào các giá trị đều quen thuộc, chúng tôi sử dụng chúng cho thuộc tính kích thước nền để kiểm tra cách một hình nền điền vào phần tử của nó thuộc về. Thuộc tính object-fit tương đối giống với nó, vì nó cũng xác định cách kích thước hình ảnh bên trong vùng chứa của nó
Giá trị chứa hình ảnh trong vùng chứa của nó. bìa không giống nhau, nhưng nếu tỷ lệ hình ảnh và vùng chứa không khớp, hình ảnh sẽ bị cắt bớt. fill doing for image to tension and fill into container. scale-down select phiên bản nhỏ nhất của hình ảnh để hiển thị
Chủ Đề