CSS: Crear fondos texturizados

Actualmente estoy luchando con la configuración de un fondo de imagen para mi sitio que se cargará lo suficientemente rápido. He utilizado la imagen de url de datos e incluso imágenes optimizadas, pero su carga es demasiado larga al cargar la página, ya que la imagen de fondo todavía es muy grande. ¿Es posible con CSS crear un color de fondo con textura como el de la imagen siguiente? aquí es un EXAMPLE CSS: Crear fondos texturizados

lo intento y no han sido capaces de igualar esto:

enter image description here

Fuente

2012-08-05 CodingWonders90

Usa una imagen de fondo embaldosada, es la única manera de obtener algo detallado. Definitivamente * no * use un URI 'data:'. Parece que ese patrón en particular se puede repetir con seguridad en un tamaño bastante pequeño si solo cambia la textura un poco para que pueda enlosarse. – Ryan

Puede [hacerlo fácilmente usando SVG y CSS] (https://stackoverflow.com/a/49108254) en aproximadamente 400 bytes. Como beneficio adicional, puede agregar una pendiente casi sin costo adicional. –

con la última tecnología CSS 3, es posible crear textura de fondo. Mira esto: http://lea.verou.me/css3patterns/#

pero todavía está limitado en muchos aspectos. Y el soporte del navegador tampoco está tan listo.

su mejor opción es usar una imagen de textura pequeña y repetir en ese fondo. usted podría conseguir algunas buenas listo para usar la imagen de textura aquí:

http://subtlepatterns.com

Fuente

2012-08-05 04:46:14 Kamal

también http://patternify.com – albert

¡Gracias! ¡justo lo que estaba buscando! – CodingWonders90

@albert, Nod 32 bloqueado ** patternify.com ** y dice La página web está en la lista de sitios web con contenido potencialmente peligroso. – stom

usted debe tratar de cortar la imagen, si es posible en una pieza más pequeña que podría ser repetido. Corté esa imagen en una imagen de 101x101px.

BG Tile

CSS:

body{ 
    background-image: url(SO_texture_bg.jpg); 
    background-repeat:repeat; 
}

embargo, en algunos casos, que no sería capaz de cortar la imagen a una más pequeña. En ese caso, usaría toda la imagen. Pero también puedes usar los métodos CSS3 como lo que mencionó Mustafa Kamal.

Le deseamos buena suerte.

Fuente

2012-08-05 05:03:07

Simplemente curioso, ¿hay alguna razón por la que elija 101 píxeles? Parece un tamaño no estándar, y me pregunto si hay una razón para esto. –

Si busca un convertidor de imagen base-64, puede incrustar algunos pequeños archivos de textura de imagen como código en su sección de código @import url(''). Se verá como un montón de código; pero al menos todos sus datos ahora se almacenan localmente, en lugar de tener que llamar a un recurso separado para cargar la imagen.

Ejemplo enlace: http://www.base64-image.de/

Cuando tomo un archivo de mi propio inventario de un simple icono en formato PNG, y convertirlo en base 64, se ve como esto en mi CSS:

url('data:image/png;base64,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')

Con sus imágenes de textura, querrá emplear un proceso similar.

Fuente

2016-09-02 05:08:18 IvanRider

Utilice un editor de imágenes para recortar una parte del fondo, luego aplique la propiedad de repetición de fondo de CSS para que la imagen pequeña llene el área donde se usa.

En algunos casos, la repetición de fondo crea costuras donde se repite la imagen. Una solución es usar un editor de imágenes de la siguiente manera: comenzando con la imagen de fondo, copie la imagen, voltee (espejo, no gire) la copia de izquierda a derecha y péguela en el borde derecho del original, superponiendo 1 píxel . Recorte para eliminar 1 píxel del borde derecho de la imagen combinada. Ahora repita para la vertical: copie la imagen combinada, voltee la copia de arriba hacia abajo, péguela en la parte inferior de la combinación, superponiendo un píxel. Recortar para eliminar 1 píxel de la parte inferior. La imagen resultante debe estar libre de costura.

Fuente

2017-05-08 12:46:36

Respuesta

Cuestiones relacionadas