porque - CSS-Fondo de punto de pixelado CSS3
insertar imagen css (5)
¿Es posible o hay un truco para hacer un fondo pixelado como el de la imagen adjunta?
Utilizo una imagen de fondo, pero como puede ver, no se escala y parpadea en el desplazamiento de la página.
Ahora tengo CSS gracias a vlcekmi3:
background-color: white;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size:100px 100px;
background-position: 0 0, 50px 50px;
Pero no puedo hacerlo exactamente como la imagen. ¿Alguien puede verificarlo?
Se agradece cualquier código, recurso, tutorial y sugerencia.
Esto se debe al tamaño de fondo, así que intente esto:
background-size:2px 2px;
Del comentario de thirtydot en la primera publicación. Debería haberlo publicado como una respuesta - Brillante. Casi lo extraño. Por favor, califique su comentario :) Solo estoy publicando esto como respuesta, por lo que podría ayudar a otros, ya que me ayudó.
Usando un mensaje codificado en base64:
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=);
Esto es lo mejor que pude hacer para unir tu imagen. Está adaptado del ejemplo aquí por Lea Verou. ¿Cuál será su alternativa para los navegadores que no sean css3?
body {
background-image: -moz-linear-gradient(45deg, #666 25%, transparent 25%),
-moz-linear-gradient(-45deg, #666 25%, transparent 25%),
-moz-linear-gradient(45deg, transparent 75%, #666 75%),
-moz-linear-gradient(-45deg, transparent 75%, #666 75%);
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #666), color-stop(.25, transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #666), color-stop(.25, transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #666)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #666));
background-image: -webkit-linear-gradient(45deg, #666 25%, transparent 25%),
-webkit-linear-gradient(-45deg, #666 25%, transparent 25%),
-webkit-linear-gradient(45deg, transparent 75%, #666 75%),
-webkit-linear-gradient(-45deg, transparent 75%, #666 75%);
background-image: -o-linear-gradient(45deg, #666 25%, transparent 25%),
-o-linear-gradient(-45deg, #666 25%, transparent 25%),
-o-linear-gradient(45deg, transparent 75%, #666 75%),
-o-linear-gradient(-45deg, transparent 75%, #666 75%);
background-image: linear-gradient(45deg, #666 25%, transparent 25%),
linear-gradient(-45deg, #666 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #666 75%),
linear-gradient(-45deg, transparent 75%, #666 75%);
-moz-background-size: 2px 2px;
background-size: 2px 2px;
-webkit-background-size: 2px 2.1px; /* override value for webkit */
background-position: 0 0, 1px 0, 1px -1px, 0px 1px;
}
El "parpadeo" que observas no es un problema de software, sino de hardware. Básicamente, es causado por el hecho de que los píxeles en su pantalla no pueden cambiar de color al instante. Dado que el fondo punteado consiste en filas de píxeles alternas, cada vez que se desplaza hacia abajo por un número impar de píxeles , habrá un breve momento en que la pantalla cambiará entre dos copias desplazadas del patrón, y esto aparecerá como un parpadeo.
Este hilo en Graphic Design Stack Exchange presenta un ejemplo aún más dramático del mismo efecto, y también explica por qué ocurre con más detalle. Solo para una demostración rápida, permítanme tomar prestada una de las imágenes de la respuesta de Volker Siegel :
Observe cómo, en la mayoría de las pantallas, esta imagen mostrará un efecto de "pulsación" notable cuando se desplaza. (También puede parpadear un poco incluso mirándolo, simplemente porque los fotorreceptores en sus ojos también tienen algún retraso en la respuesta y efectos de adaptación).
De todos modos, la única forma en que puede evitar que su fondo punteado parpadee mientras se desplaza es para que no se desplace. Afortunadamente, hay una propiedad de CSS solo para eso :
background-attachment: fixed;
Aparte de eso, no hay mucho más. La mejor manera de representar el fondo es casi seguro con una simple imagen PNG a dos colores. Incluso puedes hacer que la imagen sea semitransparente, para que puedas superponerla sobre fondos de diferentes colores. Vea el fragmento a continuación para una demostración:
body {
background-color: white;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGUlEQVQ4y2NgoBJwoJAedcGoC0ZdMOAuAABF0hABJ/8lyQAAAABJRU5ErkJggg==);
background-attachment: fixed;
}
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
Observe cómo el patrón no parpadea cuando lo desplaza con la barra de desplazamiento interior. (Parpadea cuando se desplaza por toda la página SO, porque el patrón está adjunto al <iframe> en el que se muestra y se desplazará junto con él).
(Por cierto, la imagen en línea que he usado en el fragmento de arriba es de 16 × 16 píxeles, aunque el patrón real es de solo 2 × 2 píxeles. Sin embargo, repetirlo varias veces no cuesta mucho en términos de tamaño de archivo, y podría ser un poco más seguro, ya que parece recordar algunos navegadores más antiguos que tienen problemas con imágenes de fondo muy pequeñas).
Sin todos los prefijos del navegador:
background: linear-gradient(
45deg,
#fff,
#fff 50%,
#000 50%,
#000
);
background-size: 2px 2px;