Làm thế nào để định vị đồ họa trên CSS3 Sites - núm vú

Về cơ bản, để định vị các đồ hoạ trong các trang web CSS3, bạn sử dụng kết hợp các thuộc tính ở bên trái, bên phải, trên cùng và dưới cùng để cung cấp vị trí cơ bản. Tinh chỉnh vị trí liên quan đến việc sử dụng thuộc tính margin-left, margin-right, margin-top, và margin-bottom. Để đảm bảo rằng hình ảnh vẫn ở một nơi, thông thường bạn đặt thuộc tính vị trí thành tuyệt đối. Tất cả vị trí liên quan đến kích thước hình ảnh, mà bạn đặt bằng cách sử dụng các thuộc tính chiều cao và chiều rộng.

Hình nền cũng có chức năng định vị. Bạn cũng có thể kiểm soát vị trí hình nền, lề và kích thước. Thủ tục sau đây cung cấp một ví dụ về cách bạn có thể sửa đổi ví dụ SingleImage để đặt một bản sao của hình ảnh ở giữa trang (và giữ nó ở đó bất kể trang được cuộn như thế nào).

1. Mở SingleImage. Tệp CSS.

2. Chỉnh sửa kiểu cơ thể sao cho hình ảnh được cố định ở giữa, như được hiển thị ở đây.

   body {background-image: url ("CuteCat. Jpg"); màu nền: SaddleBrown; màu sắc: SeaGreen; font-size: x-lớn; text-shadow: 1px 1px Màu vàng; vị trí nền: trung tâm; background-attachment: fixed;}
   

   Tài sản vị trí nền cho phép xác định vị trí của bản chính của một hình nền. Cài đặt mặc định đặt hình ảnh ở góc trên bên trái, có thể không được rất dễ chịu cho mắt.

   Tài sản đính kèm nền định nghĩa cách ảnh được gắn vào nền của trình duyệt. Đặt giá trị này để cố định có nghĩa là hình ảnh vẫn ở cùng vị trí ngay cả khi người dùng thay đổi kích thước màn hình hoặc cuộn nội dung.

3. Lưu tệp CSS dưới dạng BackgroundPosition. CSS.

4. Mở SingleImage. Tệp HTML.

5. Sửa đổi thẻ để trông như sau:

6. Lưu tệp HTML dưới dạng BackgroundPosition. HTML.

7. Nạp trang BackgroundPosition.

   Bạn nhìn thấy nền. Lưu ý rằng hình ảnh ban đầu bây giờ là trung tâm và các bản sao tỏa ra từ nó.