Hay propiedades CSS, como imágenes de fondo, imágenes de borde, enmascaramiento y propiedades de recorte, con las que puede añadir directamente imágenes A las páginas web y controlar su comportamiento. Sin embargo, también hay propiedades CSS relacionadas con la imagen que se mencionan con menos frecuencia que trabajar en imágenes añadidas con el Etiqueta HTML, ¿Cuál es la forma preferida de agregar imágenes a las páginas web?.
La descripción del trabajo de estas últimas propiedades varía de controlando la sombra de la imagen a estableciendo la nitidez, Ayudándonos a controlar mejor la apariencia y la posición de las imágenes agregadas con el etiqueta. Vamos a verlos uno por uno..
1. Afile las imágenes con representación de imágenes
Cuando una imagen es ampliada, el navegador suaviza la imagen, por lo que no parece pixelado. Pero, dependiendo de la resolución de la imagen y la pantalla, esto podría no ser el mejor en todo momento. Puede controlar este comportamiento del navegador con el representación de imágenes propiedad.
Esta propiedad bien soportada controla el algoritmo usado para escalar una imagen. Sus dos valores principales son: bordes crujientes y pixelado.
los bordes crujientes valor Mantiene el contraste de color entre píxeles.. En otras palabras, no se hace un suavizado a las imágenes, que ideal para ilustraciones de píxeles.
Cuando pixelado se utiliza, los píxeles cercanos de un píxel podrían tomar su apariencia, haciéndolo parecer juntos ellos formar un píxel grande, Ideal para pantallas de alta resolución..
Si sigues mirando de cerca los bordes de las flores en el GIF a continuación, puedes ver la diferencia entre un regular y un pixelado imagen.
img representación de imagen: pixelada;
2. Estirar imágenes con ajuste de objeto
los Contiene, cubrir, llenar Todos los valores son familiares, los usamos para la tamaño de fondo propiedad que controla cómo una imagen de fondo llena el elemento al que pertenece. los ajuste de objeto La propiedad es bastante similar a ella, ya que también determina cómo se dimensiona una imagen dentro de su contenedor.
los Contiene valor Contiene la imagen dentro de su contenedor.. cubrir hace lo mismo, pero si la relación de aspecto de la imagen y el contenedor no coincide, el la imagen está recortada. llenar hace que la imagen estirar y llenar su recipiente. reducción de escalaElige la versión más pequeña de la imagen. para mostrar.
De manera similar a la complementaria posición de fondo propiedad de tamaño de fondo, Hay un posición de objeto propiedad para ajuste de objeto, también.
los ajuste de objeto propiedad mueve una imagen dentro de un contenedor de imágenes a las coordenadas dadas. Las coordenadas se pueden definir como unidades de longitud absoluta, unidades de longitud relativa, palabras clave (parte superior, izquierda, centrar, fondo, y Correcto), o un combinación válida de ellos (20px superior derecha 5px, centro derecha 80px).
#container ancho: 300px; altura: 300px; img ancho: 100%; altura: 100%; posición de objeto: 150px 0;
4. Situar imágenes con alineación vertical
A veces añadimos (que están en línea por naturaleza) junto a cadenas de texto Para mayor información o decoración.. En ese caso, Alineando el texto y la imagen. en la posición deseada puede ser un poco complicado, si no sabe qué propiedad usar.
los alineación vertical la propiedad es no exclusivo de celdas de mesa solo. También puede alinear un elemento en línea dentro de un cuadro en línea, y por lo tanto puede usarse para alinear una imagen en una línea de texto. Se necesita un buen número de valores que se pueden aplicar a un elemento en línea, por lo que tiene muchas opciones para elegir.
PDF
5. Imágenes de sombras con filtro: sombra-sombra ()
Cuando se usa discretamente en textos y cuadros, las sombras pueden agregar vida a una página web. Lo mismo ocurre con las imágenes.. Imágenes con formas centrales y fondos transparentes. puede beneficiarse de la sombra paralela Filtro CSS.
Sus argumentos son similares a los valores de las propiedades CSS relacionadas con la sombra (sombra de texto, sombra de la caja). Los dos primeros representan el distancia vertical y horizontal entre las sombras y la imagen, la tercera y la cuarta son las difuminar y el radio de propagación de la sombra, y el último es el color de sombra.
Al igual que sombra de texto, sombra paralela También crea una sombra que es Moldeado al objeto de pertenencia.. Entonces, cuando se aplica a una imagen, la sombra toma la forma de la parte visible de la imagen.
#container ancho: 300px; altura: 300px; img ancho: 100%; altura: 100%; ajuste de objeto: contener;
#container ancho: 300px; altura: 300px; img ancho: 100%; altura: 100%; ajuste de objeto: contener; 
