Vexa como engadir imaxes de deseño sensibles mediante CSS
Mire os sitios web populares hoxe en día e un tratamento de deseño que seguro que verá é grande e ten unha pantalla que abarca imaxes de fondo. Un dos retos coa incorporación destas imaxes provén das mellores prácticas que os sitios web deben responder a diferentes tamaños e dispositivos de pantalla: un enfoque coñecido como deseño web sensible .
Dado que os cambios de deseño e as escalas do teu sitio web teñen tamaños de pantalla diferentes, tamén debes esixir estas imaxes en segundo plano.
En realidade, estas "imaxes fluidas" son unha das pezas crave dos sitios web responsivos (xunto con unha consulta de medios e liñas fluídas). Estas tres pezas foron un elemento básico do deseño web sensible desde o principio, pero sempre que sempre foi moi sinxelo engadir imaxes en liña sensibles a un sitio (as imaxes en liña son os gráficos codificados como parte do marcado HTML), facendo o o mesmo con imaxes de fondo (que están etiquetadas na páxina usando propiedades de fondo de CSS) forneceu un reto significativo para moitos diseñadores web e desenvolvedores de aplicacións. Afortunadamente, a adición da propiedade "fondo" en CSS fixo isto posible.
Nun artigo separado, cubrín como usar o tamaño de fondo da propiedade CSS3 para estirar as imaxes para que se encaixan nunha fiestra, pero hai unha forma aínda mellor e útil de implementar para esta propiedade. Para iso, utilizaremos a seguinte combinación de propiedades e valores:
tamaño de fondo: capa;
A propiedade de portada de táboa dille ao navegador que escale a imaxe para que se axuste á fiestra, independentemente da grande ou pequena que obtén a fiestra. A imaxe escaló para cubrir toda a pantalla, pero as proporcións orixinais e a relación de aspecto mantéñense intactas, impedindo que a imaxe se distorsione.
A imaxe sitúase na xanela o máis grande posible para que se cubra toda a superficie da xanela. Isto significa que non terá ningún espazo en branco na súa páxina nin distorsión na imaxe, pero tamén significa que se pode eliminar parte da imaxe en función da relación de aspecto da pantalla e da imaxe en cuestión. Por exemplo, os bordos dunha imaxe (xa sexa superior, inferior, esquerda ou dereita) pódense cortar nas imaxes, dependendo dos valores que utilice para a propiedade da posición de fondo. Se orientas o fondo a "arriba á esquerda", calquera exceso na imaxe desaparecerá dos lados dereito e inferior. Se centra a imaxe de fondo, o exceso desaparecerá de todos os lados, pero como o exceso esténdese, o impacto por calquera lado será menos útil.
Como usar o tamaño do fondo: cubrir;
Ao crear a súa imaxe de fondo, é unha boa idea crear unha imaxe que sexa bastante grande. Mentres os navegadores poden facer unha imaxe máis pequena sen un impacto notable na calidade visual, cando un navegador escale unha imaxe a un tamaño maior que as súas dimensións orixinais, a calidade visual será degradada, borrándose e pixelada. A desvantaxe de todo isto é que a túa páxina toma un éxito de performance cando estás entregando imaxes xigantes a tódalas pantallas.
Cando fagas isto, asegúrate de preparar correctamente esas imaxes para a velocidade de descarga e a entrega na web . Ao final, ten que atopar o medio feliz entre un tamaño e calidade de imaxe suficientemente grande e un tamaño de ficheiro razoable para velocidades de descarga.
Unha das formas máis comúns de usar imaxes de fondo para escalar é cando quere que esa imaxe tome o fondo completo dunha páxina, se a páxina é ancha e se a vexa nunha computadora de escritorio ou moito menor e está a ser enviada a unha computadora de man, móbil dispositivos.
Cargue a súa imaxe no seu servidor web e engada o seu CSS como imaxe de fondo:
background-image: url (fireworks-over-wdw.jpg);
background-repeat: non-repetir;
posición de fondo: centro central;
adxunto de fondo: fixo;
Engade primeiro o navegador CSS predefinido:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-fondo-tamaño: capa;
A continuación, engade a propiedade CSS:
tamaño de fondo: capa;
Usando distintas imaxes que axusten a diversos dispositivos
Mentres o deseño sensible para unha experiencia de escritorio ou portátil é importante, a variedade de dispositivos que poden acceder á web creceu significativamente e unha maior variedade de tamaños de pantalla vén con iso.
Como se mencionou anteriormente, cargar unha imaxe de fondo moi sensible nun teléfono intelixente, por exemplo, non é un deseño eficiente ou de ancho de banda.
Aprende como podes usar consultas multimedia para servir imaxes que sexan axeitadas aos dispositivos nos que se mostrarán e mellorar aínda máis a compatibilidade do teu sitio web con dispositivos móbiles.
Artigo orixinal de Jennfier Krynin. Editado por Jeremy Girard o 17/09/17