Làm cách nào để tạo một phần tử html có kích thước tùy ý với đường viền trong suốt một phần?

Question

Hãy xem xét những hình ảnh sau đây:

Đây là vụ phải trông giống như một bản vá của cỏ với thô cạnh (deckled). Đó là một hình ảnh png 200x200 pixel, với độ trong suốt ở các cạnh để mang lại một cái nhìn tự nhiên.

Vấn đề là, tôi đang cố gắng thiết kế trang web nơi tôi muốn các thành phần khác nhau có kích thước khác nhau, nhưng tôi không thể sử dụng thuộc tính nền css đơn giản, vì lặp lại hình ảnh như thế này 't làm việc: minh bạch bên trái, ví dụ, trong rõ ràng có thể nhìn thấy như một đường nối giữa mỗi bản sao của hình ảnh. Nhưng nếu tôi chỉ đơn giản là kéo dài hình ảnh để phù hợp, nó cũng không đẹp lắm.

Có cách nào (trình duyệt chéo) để thực hiện việc này không? Các giải pháp jQuery cũng được chấp nhận. Cảm ơn!

Answer 1

Một jQuery giải pháp:

http://code.google.com/p/scale9grid/

---

border-image sự là giải pháp CSS tinh khiết:

• http://www.w3.org/TR/css3-background/#border-images
• https://developer.mozilla.org/en/CSS/-moz-border-image

Thật không may, trình duyệt hỗ trợ là chưa đủ tốt: http://caniuse.com/border-image

Một máy phát điện: http://border-image.com/

Answer 2

Bạn có thể làm điều đó với thuộc tính CSS3 border-image. Nó được hỗ trợ (dưới dạng biến thể tiền tố) bởi all major browsers ngoại trừ bạn-biết-ai.

Answer 3

âm thanh với tôi như bạn cần hình ảnh trên cùng, dưới cùng, bên trái, bên phải (và hình ảnh cho 4 góc), với hình ảnh trung tâm bạn có thể lặp lại. Sau đó, một chút CSS để đặt chúng lại với nhau một cách chính xác. Giống như cách mọi người sử dụng để làm các góc tròn! Bí quyết thực sự là nhận được hình ảnh trung tâm có thể lặp lại. Điều đó có thể được thực hiện đơn giản hơn bằng cách chỉ định kích thước div trung tâm của bạn theo các bước khớp với kích thước của hình ảnh trung tâm mà bạn kết thúc.

TBH Tôi thậm chí không biết liệu có thể đưa ra một pháp sư trung tâm không giống như một miếng vá làm việc khi lặp lại.

EDIT Tôi đã có một ý tưởng tốt hơn!

Nếu bạn tạo hình ảnh có hiệu quả mặt nạ để "cho qua" hình ảnh cỏ của bạn. Bạn có thể sử dụng một kỹ thuật sprite css để định kích thước hình ảnh của bạn, sau đó phủ lên các hình ảnh bên/góc để có được hiệu ứng cạnh rách rưới. Các sprite css sẽ được kéo ra khỏi một hình ảnh lớn hơn, đủ lớn để đối phó với tối đa dự kiến ​​của bạn "ngói".

Answer 4

Bạn có thể bọc khu vực nội dung của bạn trong 4 divs khác và đưa ra PNG như hình ảnh cho một bên khác nhau cho mỗi của các div. Vấn đề là div nội dung khu vực của bạn sẽ có một nền tảng vững chắc và sẽ hiển thị trong khu vực trong suốt cho các cạnh của bạn.

Điều đó đang được nói, bạn có thể thực hiện một cách tiếp cận khác.

Top div phao Cạnh Bên trái Div, Content Div, Float Cạnh Bên trái Div (cạnh phải) dưới div

Đây sẽ là cross trình duyệt tương thích mặc dù một nỗi đau để thiết lập.