Nội dung CSS lặp lại

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

Đăng bởiBramus. Ngày 31 tháng 3 năm 2020Ngày 1 tháng 4 năm 2020Đăng trong Ở nơi khác

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ơn

Ví dụ

body {
  hình nền. url("gradient_bg. png");
  lặp lại nền. lặp lại-x;
}

Tự mình thử »

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);
}

3

---

lặ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);
}

4

Ví 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;
}

Tự mình thử »

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

Diggin' màu cam đó. (Nguồn)

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 dung

Dự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

CSS tự động điền là gì?

Các. lớp giả CSS tự động điền khớp khi phần tử . Lớp ngừng khớp nếu người dùng chỉnh sửa trường.

Làm thế nào bạn có thể sử dụng CSS để kiểm soát sự lặp lại của hình ảnh?

Để kiểm soát việc lặp lại hình ảnh trong nền, hãy sử dụng thuộc tính lặp lại nền . Bạn có thể sử dụng giá trị no-repeat cho thuộc tính background-repeat nếu bạn không muốn lặp lại một hình ảnh, trong trường hợp này, hình ảnh sẽ chỉ hiển thị một lần.

1fr trong các cột mẫu lưới là gì?

Fr là đơn vị phân số và 1fr là 1 phần dung lượng có sẵn .

Đọc tiếp