css - icon - nucleo fonts
sprites/porcentajes de respuesta (8)
He leído todas las preguntas sobre sprites de respuesta usando css, vi jsfiddle con ejemplos prácticos de sprites de respuesta, pero todavía no puedo entender cómo obtener el porcentaje de posición de fondo y de tamaño de fondo, cómo usar un contenedor la gente dice que es necesario) alrededor de la div que usa imagen de fondo y por qué usarla ...
Por ejemplo, si tengo un div que tiene ancho: 20% (por ejemplo, 40px) y es un círculo. La imagen que necesito usar como imagen de fondo tiene un ancho de 80 px (un círculo y necesito cambiar su tamaño para que se ajuste a mi div) y es una de las 40 imágenes que tengo en mi hoja de sprites. Está en la posición -173px -293px.
Realmente no tengo ni idea de cómo hacer que funcione.
Lo intenté:
div {
width:20%;
border-radius:50%;
background: url(''images/sprites.png'') no-repeat 72.083% 67.981%;
background-size: 50%;
}
Por supuesto, no funcionó. No entiendo cómo obtener la posición de fondo-x, la posición de fondo-y (los números que tengo son de la hoja de sprite de tamaño "automático") cuando el tamaño de fondo no es automático, o cómo el tamaño de fondo Se relaciona con el porcentaje del tamaño div.
¿Hay alguna fórmula matemática que pueda usar? ¿Puede alguien explicarme o darme un nombre de algún sitio web / libro donde pueda aprenderlo?
Gracias,
¡Este es el mejor ejemplo de respuesta que he encontrado para resolver el problema del sprite !
Navegador cruzado, redimensionamiento / estiramiento responsivo de imágenes de sprite CSS
Este método no se basa en el tamaño de fondo , por lo que funcionará en navegadores más antiguos.
Este ejemplo utiliza una imagen de 800 de ancho x 160 de alto. Esta imagen contiene 6 sprites de igual tamaño (160x160 cada uno).
Si su tamaño de sprite es diferente, todo lo que necesita cambiar es la propiedad de ancho máximo de .sprite para que coincida con el ancho del sprite individual.
Para configurar el sprite visible: Establezca el valor izquierdo de .sprite en: 0 = 1st sprite -100% = 2nd sprite -200% = 3rd sprite etc ... ¡Fácil!
Si desea que las imágenes se extiendan más que su tamaño natural: agregue la clase .no-limit a .stretchy. Esto elimina el ancho máximo: 160 px de .stretchy y agrega min-height: 100% a .sprite Alternativamente, puede establecer un ancho máximo mayor utilizando un valor de px, por ejemplo, 300 px.
La imagen del espaciador puede ser de cualquier tamaño, siempre que sea proporcional a las dimensiones de los sprites individuales.
Esta es una solución más simple, revisa esto
.my_picture{
//target your sprite
background: url(my_img.jpg) no-repeat;
//Specify it full image
backgound-size: 100%;
//Position of the targeted picture
background-position: left 0 bottom x%;
//Zoom in or out on the position
width: x%;
//Scale height by playing with padding
padding-bottom: x%;
//Set height to 0 because of sprite size
height: 0;
}
¿Como funciona? Para apuntar cualquier imagen de sprites fácilmente, tenemos que especificar el tamaño de sprites al original, "100%". Luego, apuntaremos a una posición de la imagen desde la parte inferior correspondiente, con 0 a la izquierda.
Debido a que el tamaño del sprite se establece en un máximo del 100%, tenemos que deshabilitar la altura, y la única opción para establecer la altura ahora, es jugar con el relleno inferior, en porcentaje también.
Su imagen ahora es totalmente sensible, solo juegue con los valores de ancho (en porcentaje), para acercar o alejar, y eso es todo, usted tiene un sprite CSS completamente sensible.
Artículo original en mi blog aquí: http://creativcoders.wordpress.com/2014/05/05/css-responsive-sprites/
He escrito un Generador de Sprite Responsive CSS para que se encargue de todo el trabajo por usted. Solo puedes subir un montón de imágenes y te dará una imagen de sprite y el CSS para ello.
Utiliza un método novedoso para hacer que los sprites respondan: un src de datos con un PNG transparente para hacer que la imagen mantenga su relación de aspecto, por lo que, a diferencia de otros métodos, las imágenes no necesitan ser cuadradas o la misma proporción.
La dimensión div no se reproduce en el cálculo, solo los tamaños de fondo y la parte que se va a utilizar.
Digamos que su fondo tiene un ancho de 1000px y una altura de 500px.
La imagen que vas a usar tiene 80px de ancho y alto.
tamaño de fondo
x part 1000px / 80px = 12.5 ->> 1250%
y part 500px / 80px = 6.25 ->> 625%
background-size: 1250% 625%;
posición de fondo:
x-part 173px / 1000px = 0.173 ->> 17.3%
y part 293px / 500px = 0.586 ->> 58.6%
background-position: 17.3% 58.6%;
Mi enfoque es similar al de Greg en el sentido de que escribí una herramienta para generar sprites CSS con capacidad de respuesta. Sin embargo, lo he llevado un paso más allá y he agregado un algoritmo de clasificación para que pueda empaquetar más imágenes de manera eficiente en un png.
Aquí está la herramienta Responsive CSS Sprite Generator Tool: https://responsive-css.us/
Pasé mucho tiempo buscando una respuesta sobre este asunto, salí con esta solución, funciona para mí, al menos por ahora, se basa en el tamaño de la caja de píxeles fijos y los sprites horizontales, de todos modos será un desastre. porque tendrá que hacer la matemática para los valores de píxeles para ese porcentaje, y para los sprites localizados al azar porque tendrá que encontrar la ubicación aleatoria del sprite dentro de la imagen, demasiada matemática para una tarea simple, creo.
Necesitas:
- Conozca el ancho de la imagen (ancho de la imagen de la
compass image-width($image)) - El tamaño de píxel original y la ubicación del sprite dentro de la imagen (Photoshop hace el truco)
- El tamaño de la caja contenedora proporcional al sprite correspondiente que debe mostrar
- Y, por supuesto, la cantidad de estiramiento que desea aplicar al sprite específico.
Como consejo, deberás dejar al menos 1px de margen físico entre cada imagen porque los porcentajes no producen píxeles enteros, ¡y terminarás con sprites superpuestos! ;)
Échale un vistazo y dame un comentario por favor:
//functions
//stretch by percentage
@function stretchImage($width, $height, $percentage) {
$s_width: round( ($width * $percentage) / 100 );
$s_height: round( ($height * $percentage) / 100 );
@return ($s_width, $s_height);
}
//strip units
//(Eric M Suzanne) http://.com/questions/12328259/how-do-you-strip-the-unit-from-any-number-in-sass
@function strip-units($number) {
@return $number / ($number * 0 + 1);
}
//replace in string
//(css tricks) http://css-tricks.com/snippets/sass/str-replace-function/
@function str-replace($string, $search, $replace: '''') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
//get unitless percentage
@function getPercentageFrom($valueA, $valueB) {
$percentage: percentage(strip-units($valueA)/strip-units($valueB));
@return ($percentage);
}
//now the magic
//we know the witdh of the image containing the sprites
$image: url(http://www.cssguy4hire.com/codePenAssets/sprite_test.png);
$image_width: 965px;
//the amount of strech we want to aply
$stretchTo: 175;
//we know the current sprite measures we going to set
$sprite_width: 150px;
$sprite_height: 150px;
//left is 0 cuz is first sprite
$sprite_left: 0%;
//stretch sprite
$stretch: stretchImage($sprite_width, $sprite_height, $stretchTo);
$width: nth($stretch, 1);
$height: nth($stretch, 2);
//set background size and position
$bkg-size: getPercentageFrom($image_width * ($stretchTo / 100), $width);
//default position 0
$bkg_left: $sprite_left;
//compose the css
#image {
margin: auto;
width: $width;
height: $height;
position: relative;
display: block;
background: #00f00f $image $bkg_left 0 no-repeat;
background-size: $bkg-size;
border: 5px solid #cccccc;
//we chage the sprite
&.sprite_1 {
//the amount of strech we want to aply
$stretchTo: 250;
//we know the current sprite measures we going to set
//0 is te first sprite starting left to right
$sprite_width: 250px;
$sprite_height: 75px;
$sprite_left: 150px;
//stretch sprite
$stretch: stretchImage($sprite_width, $sprite_height, $stretchTo);
$width: nth($stretch, 1);
$height: nth($stretch, 2);
//set background size
$bkg-size: getPercentageFrom($image_width * ($stretchTo / 100), $width);
$bkg_left: percentage($sprite_left / ($image_width - $sprite_width) );
//compose the css
width: $width;
height: $height;
background-size: $bkg-size;
background-position: $bkg_left 0;
}
&.sprite_2 {
//the amount of strech we want to aply
$stretchTo: 80;
//we know the current sprite measures we going to set
$sprite_width: 140px;
$sprite_height: 120px;
$sprite_left: 400px;
//stretch sprite
$stretch: stretchImage($sprite_width, $sprite_height, $stretchTo);
$width: nth($stretch, 1);
$height: nth($stretch, 2);
//set background size
$bkg-size: getPercentageFrom($image_width * ($stretchTo / 100), $width);
$bkg_left: percentage($sprite_left / ($image_width - $sprite_width) );
//compose the css
width: $width;
height: $height;
background-size: $bkg-size;
background-position: $bkg_left 0;
}
&.sprite_3 {
//the amount of strech we want to aply
$stretchTo: 125;
//we know the current sprite measures we going to set
$sprite_width: 290px;
$sprite_height: 134px;
$sprite_left: 540px;
//stretch sprite
$stretch: stretchImage($sprite_width, $sprite_height, $stretchTo);
$width: nth($stretch, 1);
$height: nth($stretch, 2);
//set background size
$bkg-size: getPercentageFrom($image_width * ($stretchTo / 100), $width);
$bkg_left: percentage($sprite_left / ($image_width - $sprite_width) );
//compose the css
width: $width;
height: $height;
background-size: $bkg-size;
background-position: $bkg_left 0;
}
&.sprite_4 {
//the amount of strech we want to aply
$stretchTo: 153;
//we know the current sprite measures we going to set
$sprite_width: 135px;
$sprite_height: 56px;
$sprite_left: 830px;
//stretch sprite
$stretch: stretchImage($sprite_width, $sprite_height, $stretchTo);
$width: nth($stretch, 1);
$height: nth($stretch, 2);
//set background size
$bkg-size: getPercentageFrom($image_width * ($stretchTo / 100), $width);
$bkg_left: percentage($sprite_left / ($image_width - $sprite_width) );
//compose the css
width: $width;
height: $height;
background-size: $bkg-size;
background-position: $bkg_left 0;
}
}
Puede utilizar sitios web para averiguar las coordenadas exactas de su sprite. Personalmente uso http://www.spritecow.com/
Una actualización a la respuesta de @vals. Algunos de sus cálculos no funcionaron para mí.
Los cálculos de tamaño de fondo funcionaron, excepto que estaba multiplicando por 1000 en lugar de 100 para obtener las cifras porcentuales finales. Entonces 12500% debería ser 1250% y así sucesivamente. (Actualización: 10/2015 - parece que @vals ha corregido esto en su respuesta.)
Los cálculos de valores de posición de fondo X fueron muy leves para mí. No coincidieron con lo que generó spritecow.com (según la sugerencia de Adrian Florescu). Esto es, creo, porque las coordenadas absolutas se calculan desde la izquierda de la imagen de fondo, mientras que con los porcentajes, se debe calcular desde la derecha de la imagen de fondo. Siendo ese el caso, debe restar el ancho de la imagen del ancho de fondo general antes de dividir el número absoluto de x-pos con él.
Así que en lugar de:
x-part 173px / 1000px = 0.173 ->> 17.3%
hacer esto:
x-part 173px / (1000px - 80px) = 0.1880434783 ->> 18.80434783%
Dónde:
1000px es el ancho de la imagen de fondo (sprite)
80px es el ancho de la imagen mostrada
173px es la coordenada x absoluta de la imagen mostrada.
Esto es lo que funciona para mí, de todos modos!