5 hình ảnh trên một yếu tố
Thủ thuật chính là sử dụng các nội dung đã được tạo ra ( ‘::trước’ và ‘::sau’) để đặt thêm bốn hình ảnh trên một yếu tố. Phần yếu tố giả ‘:: trước’ có thể có một hình nền sau và một hình tiền cảnh, cũng như vậy, yếu tố giả ‘::sau’ và bản thân yếu tố đó có một nền sau, tạo thành tổng số 5 hình ảnh.
Chúng ta tạo ra 5 hình ảnh định dạng PNG và đặt chúng vào bốn góc và đối diện với cạnh phải của yếu tố. Sau đây là các hình ảnh:
- Góc trái trên::
-
- Cạnh trên và góc phải trên:
-
- Phần giữa và cạnh phải:
-
- Góc trái dưới:
-
- Cạnh đáy và góc phải dưới:
-
Và đây là quy tắc CSS cho đặt vị trí hình ảnh:
blockquote { max-width: 620px; background: url(rs-right.png) right repeat-y }blockquote::before { display: block; line-height: 0; background: url(rs-topright.png) top right no-repeat; content: url(/rs-topleft.png) }blockquote::after { display: block; line-height: 0; background: url(rs-bottomright.png) bottom right no-repeat; content: url(rs-bottomleft.png) }
Vì ảnh nền sau của chúng ta có chiều rộng 620 px, chúng ta không thể tạo hộp rộng hơn 620 px mà không có khoảng trống. Đó là lý do tại sao có thuộc tính ‘max-width’ ở đây. Cần có thuộc tính ‘display:block’ để đảm bảo rằng nội dung được tạo ra sẽ tạo thành các hộp của chính nó ở phía trên và phía dưới nội dung chính; thay vì được chèn vào dòng đầu tiên và cuối cùng. 'line-height: 0' để đảm bảo không có khoảng trống nào thừa cho các phần trồi lên và các phần thấp bên trên và bên dưới hình ảnh trong thuộc tính ‘content’.
