¿Cómo puedo hacer un elemento html de tamaño arbitrario con bordes parcialmente transparentes?

Question

Considérese la siguiente imagen:

Esto se supone que se vea como un parche de hierba con los bordes ásperos (deckled). Es una imagen png de 200x200 píxeles, con transparencia en los bordes para darle un aspecto natural.

El problema es que estoy tratando de diseñar una página web donde quiera que varios elementos de todos los tamaños tengan este fondo, pero no puedo usar una propiedad de fondo simple de css, porque repetir una imagen como esta doesn No funciona: la transparencia de la izquierda, por ejemplo, se ve claramente como una costura entre cada copia de la imagen. Pero si simplemente estiro la imagen para que quepa, tampoco se ve muy bien.

¿Hay alguna forma (cruzada) de lograr esto? Las soluciones jQuery también son aceptables. ¡Gracias!

Answer 1

Un jQuery:

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

---

border-image es la solución puro CSS:

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

Desafortunadamente, el soporte de los navegadores no es suficiente todavía bueno: http://caniuse.com/border-image

Un generador: http://border-image.com/

Answer 2

Puede hacerlo con la propiedad CSS3 border-image. Es compatible (en forma de variantes de prefijo) por all major browsers excepto you-know-who.

Answer 3

me parece que necesita imágenes superior, inferior, izquierda, derecha (e imágenes para las 4 esquinas), con una imagen central que puede repetir. Luego, un pequeño CSS para juntarlos todos correctamente. ¡Muy parecido a cómo la gente solía hacer esquinas redondeadas! El verdadero truco es obtener una imagen central repetible. Eso se puede simplificar al solo dimensionar su div central en pasos que coincidan con el tamaño de la imagen central con la que termina.

TBH Ni siquiera sé si es posible encontrar una maga central que no se vea como una colcha de trabajo de parche cuando se repita.

EDIT ¡He tenido una mejor idea!

Si crea imágenes que son efectivamente máscaras para "dejar pasar" su imagen de hierba. Puede usar una técnica de sprite de css para dimensionar su imagen, luego superponer las imágenes de lado/esquina para obtener el efecto de borde irregular. El sprite css se extraerá de una imagen más grande, lo suficientemente grande como para hacer frente a su "azulejo" máximo esperado. solución

Answer 4

uno puede cerrar su área de contenido en otros 4 divs y dar al PNG como imagen para un lado diferente para cada de los divs El problema es que su div del área de contenido tendrá un fondo sólido y aparecerá en el área transparente de sus bordes.

Dicho esto, puede adoptar un enfoque diferente.

Top div flotador borde izquierdo Div, Div contenido, flotador del borde izquierdo Div (extremo derecho) div inferior

Ésta será navegadores compatibles a través de un dolor de configurar.