Lặp lại một phần của hình ảnh trong CSS

Question

Tôi muốn lấy một phần của hình ảnh, ví dụ như giữa hình thu nhỏ và chỉ lặp lại phần đó trong nền của div. Điều này thậm chí từ xa có thể? Tôi cho rằng tôi có thể làm điều này trong javascript, nhưng điều đó sẽ lộn xộn.

Về lý thuyết câu trả lời cho câu hỏi của tôi sẽ có thể lấy một pixel đơn lẻ từ một hình ảnh và lặp lại nó trong một dòng hoặc dưới dạng nền liền mạch.

Có ai có ý tưởng nào về cách tôi có thể thực hiện điều này trong CSS không?

Answer 1

Bạn có thể đạt được hiệu ứng này bằng cách sử dụng thuộc tính CSS3 border-image.

Thật không may, tôi không biết cách làm điều này trong CSS2. Ngoài ra, tôi không nghĩ rằng bạn có thể làm điều này thông qua CSS sprites, bởi vì sprites không kéo dài các phần của hình ảnh của bạn - chúng chỉ cho phép bạn hiển thị các phần nhất định của hình ảnh.

Steve

Answer 2

Nếu bạn muốn có giải pháp trình duyệt chéo, thì hiện tại bạn không may mắn, đặc biệt nếu bạn muốn có giải pháp CSS.

Cách duy nhất để làm điều đó với JavaScript sẽ là thông qua phần tử canvas, nhưng điều đó không được IE hỗ trợ.

Answer 3

CSS không thể thực hiện việc này. Tuy nhiên bạn có thể làm điều đó phía máy chủ hoặc bằng cách sử dụng đồ họa SVG hoặc Flash. Lưu ý rằng việc thực hiện nó bằng plugin sẽ không phải là 'nền-hình ảnh' về mặt kỹ thuật, bạn cần phải định vị nội dung của mình ở phía trên cùng của nó. 01

Answer 4

Tương phản với những gì ở đây đã nêu, tùy thuộc vào hình ảnh, bạn CÓ THỂ làm điều này với CSS/Sprites Nhưng điều đó không phải lúc nào cũng xảy ra, nó đi xuống hình ảnh bạn muốn lặp lại, chiều cao/chiều rộng liên quan đến chữ viết nó tồn tại, hướng bạn muốn lặp lại nó, và kích thước của container bạn muốn nó lặp lại trong.

alt text http://www.sampsonresume.com/labs/sprite.gif

sprite này có thể được lặp đi lặp lại ở bên trái 100px để sử dụng trong một bên, trong khi các phần khác có thể đóng vai trò như các nút và roll- kết thúc các trạng thái trong điều hướng. với một thay đổi nhỏ, bạn có thể làm cho phần có thể lặp lại nằm ngang.