Sử dụng chức năng CSS element[]
, có thể tạo lại bìa album có chứa văn bản lặp lại, chẳng hạn như “Cuộc đời của Pablo”
.target {
background-image: -moz-element[#id_of_an_element_to_use_as_the_background];
}
Ollie Williams trình bày tất cả về CSS-Tricks
Cách lặp lại văn bản làm hình nền trong CSS bằng cách sử dụng element[]
→
📸 Trở lại năm 2013, tôi đã thử nghiệm với element[]
để tạo lại phần tử . Các biến thể
alternate
và slide
vẫn hoạt động tốt, nhưng có vẻ như các biến thể left
/element[]
0/element[]
1/element[]
2 có thể cần đánh bóng lại để chúng hoạt động tốt trở lại
Xuất bản bởi Bramus
Bramus là nhà phát triển web giao diện người dùng đến từ Bỉ, làm việc với tư cách là Kỹ sư quan hệ nhà phát triển Chrome tại Google. Kể từ thời điểm anh ấy phát hiện ra nguồn xem ở tuổi 14 [trở lại năm 1997], anh ấy đã yêu thích web và mày mò về nó kể từ đó [thêm …]
Một số hình ảnh chỉ nên được lặp lại theo chiều ngang hoặc chiều dọc, nếu không chúng sẽ trông lạ, như thế này
Nếu hình trên chỉ được lặp lại theo chiều ngang [
.element {
background-image: -moz-element[#thingy];
}
2] thì nền sẽ đẹp hơnVí dụ
body {
hình nền. url["gradient_bg. png"];
lặp lại nền. lặp lại-x;
}
Mẹo. Để lặp lại một hình ảnh theo chiều dọc, hãy đặt
.element {
background-image: -moz-element[#thingy];
}
3lặp lại nền CSS. không lặp lại
Chỉ hiển thị hình nền một lần cũng được chỉ định bởi thuộc tính
.element {
background-image: -moz-element[#thingy];
}
4Ví dụ
Chỉ hiển thị hình nền một lần
body {
hình nền. url["img_tree. png"];
lặp lại nền. không lặp lại;
}
Trong ví dụ trên, hình nền được đặt ở cùng một vị trí với văn bản. Chúng tôi muốn thay đổi vị trí của hình ảnh để nó không làm xáo trộn văn bản quá nhiều
Mẹo. Hình nền được đặt theo thuộc tính vị trí nền. Nếu không chỉ định vị trí nền, hình ảnh luôn được đặt ở góc trên cùng bên trái của phần tử
Đưa ra bản chạy thử ❯
Giá trị mặc định. lặp lạiKế thừa. không có hoạt ảnh. không. Đọc về animatableVersion. Cú pháp CSS1JavaScript. vật. Phong cách. backgroundRepeat="repeat-x" Thử đi
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính
Thuộc tínhbackground-repeat1. 04. 01. 01. 03. 5
Ghi chú. IE8 trở về trước không hỗ trợ nhiều hình nền trên một phần tử
Cú pháp CSS
Bối cảnh Lặp lại. nói lại. lặp lại-x. lặp lại-y. không lặp lại. ban đầu. thừa kế;
Giá trị tài sản
Giá trịMô tảDemorepeatHình nền được lặp lại theo cả chiều dọc và chiều ngang. Hình ảnh cuối cùng sẽ được cắt bớt nếu nó không phù hợp. Đây là mặc địnhDemo ❯repeat-xHình nền chỉ được lặp lại theo chiều ngangDemo ❯repeat-yHình nền chỉ được lặp lại theo chiều dọcDemo ❯no-repeatHình nền không được lặp lại. Hình ảnh sẽ chỉ được hiển thị một lầnBản trình diễn ❯không gianHình nền được lặp lại nhiều nhất có thể mà không bị cắt. Hình ảnh đầu tiên và hình ảnh cuối cùng được ghim vào một trong hai bên của phần tử và khoảng trắng được phân bổ đồng đều giữa các hình ảnh Bản trình diễn ❯vòngHình ảnh nền được lặp lại và cắt xén hoặc kéo dài để lấp đầy khoảng trống [không có khoảng trống]Bản trình diễn ❯initialĐặt thuộc tính này về giá trị mặc định của nó. Đọc về khởi tạo Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về thừa kế
Có một xu hướng thiết kế mà tôi thấy xuất hiện khắp nơi. Có thể bạn cũng đã thấy. Đây là loại văn bản được lặp đi lặp lại nhiều lần. Một ví dụ điển hình là trang web so sánh giá, GoCompare, người đã sử dụng nó trong một chiến dịch quảng cáo đa kênh lớn
Nike cũng đã sử dụng nó, giống như trong quảng cáo này
Tôi không thể không tự hỏi làm cách nào để triển khai kiểu thiết kế này cho trang web. Ý tôi là, rõ ràng chúng ta có thể lặp lại văn bản trong phần đánh dấu. Chúng tôi cũng có thể xuất thiết kế dưới dạng hình ảnh bằng cách sử dụng thứ gì đó như Photoshop, nhưng việc đưa văn bản vào hình ảnh không tốt cho cả SEO và khả năng truy cập. Sau đó, có một thực tế là, ngay cả khi chúng tôi đã sử dụng văn bản thực tế, không phải chúng tôi muốn trình đọc màn hình nói ra điều đó
Tính linh hoạt
Tính linh hoạt
Tính linh hoạt
Tính linh hoạt
OK, dừng lại đã
Những cân nhắc này khiến việc làm điều gì đó như thế này trên web có vẻ không thực tế. Sau đó, tôi thấy mình đang dồn nén tính năng Element[] đã tồn tại từ lâu nhưng được hỗ trợ kém trong CSS. Nó cho phép sử dụng bất kỳ phần tử HTML nào làm hình nền, cho dù đó là một phần tử nút duy nhất hay toàn bộ
.element {
background-image: -moz-element[#thingy];
}
5 nội dungDựa theo
Hàm phần tử [] chỉ tái tạo giao diện của phần tử được tham chiếu, không phải nội dung thực tế và cấu trúc của nó. Tác giả chỉ nên sử dụng nó cho mục đích trang trí
Đối với mục đích của chúng tôi, chúng tôi sẽ tham khảo một thành phần văn bản để có được hiệu ứng lặp lại đó
Hãy xác định một ID mà chúng ta có thể áp dụng cho phần tử văn bản mà chúng ta muốn lặp lại. Hãy gọi nó là
.element {
background-image: -moz-element[#thingy];
}
6. Lưu ý rằng khi chúng tôi sử dụng .element {
background-image: -moz-element[#thingy];
}
6, chúng tôi phải thêm tiền tố vào giá trị element[]
với.element {
background-image: -moz-element[#thingy];
}
9. Mặc dù element[]
đã được hỗ trợ trong Firefox từ năm 2010, nhưng đáng tiếc là nó đã không xuất hiện trong bất kỳ trình duyệt nào khác kể từ đó.element {
background-image: -moz-element[#thingy];
}
Đây là một bản giải trí hơi lỏng lẻo của quảng cáo Nike mà chúng ta đã thấy trước đó. Một lần nữa, Firefox được yêu cầu để xem bản demo như dự định
Dự phòng nhúng CodePen
Xem làm thế nào mà hoạt động khái niệm?
Nền element[]
đang hoạt động. Điều đó có nghĩa là giao diện của element[]
2 trên đối tượng sử dụng nó sẽ thay đổi nếu phần tử HTML được tham chiếu thay đổi. Đó là cùng một loại thỏa thuận khi làm việc với các thuộc tính tùy chỉnh. thay đổi biến và nó cập nhật ở mọi nơi nó được sử dụng
Tất nhiên, có những trường hợp sử dụng khác cho tài sản này. Kiểm tra cách Preethi sử dụng nó để tạo điều hướng cuộn trong trang cho một bài báo. Bạn cũng có thể sử dụng phần tử canvas HTML làm nền nếu bạn muốn trở nên lạ mắt. Một cách tôi đã sử dụng là hiển thị ảnh chụp màn hình của các trang trong mục lục. Vincent De Oliveira, đã ghi lại một số ví dụ cực kỳ sáng tạo. Đây là hiệu ứng phản chiếu hình ảnh, nếu bạn thích thiết kế web cổ điển