Estilos de imágenes CSS
- Página anterior Herramientas de tooltip CSS
- Página siguiente Propiedad object-fit CSS
Aprende cómo usar CSS para establecer estilos de imágenes。
Imágenes con bordes redondeados
usar border-radius propiedad para crear imágenes redondas：
imagen de miniatura
usar bordes propiedad para crear miniaturas。
Miniatura：
Ejemplo
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
<img src="paris.jpg" alt="Paris">
Imágenes responsivas
Las imágenes responsivas se ajustan automáticamente para adaptarse al tamaño de la pantalla。
Si deseas reducir la imagen según sea necesario, pero evitar ampliarla más allá del tamaño original, agrega el siguiente código：
Ejemplo
img {
max-width: 100%;
height: auto;
}
Consejo:en nuestro Tutorial CSS RWD Aprende más sobre diseño web responsive en nuestros
Centrar imagen
Si deseas centrar la imagen, configura los márgenes laterales como auto y configúralo como un elemento de bloque：
Ejemplo
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
Fotografía Polaroid / Tarjeta
Tulip amarilla
Tulip roja
Ejemplo
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
}
Imagen transparente
opacity El rango de valores de la propiedad es de 0.0 a 1.0. Cuanto más bajo sea el valor, más transparente será:
opacity 0.2
opacity 0.5
opacity 1 (por defecto)
Ejemplo
img {
opacity: 0.5;
}
Texto en imagen
Cómo posicionar texto en una imagen:
Ejemplo
Pruebe usted mismo:
Filtros de imagen
CSS filter La propiedad añade efectos visuales (como el desenfoque y la saturación) al elemento.
Nota:Internet Explorer o Edge 12 no admiten la propiedad filter.
Ejemplo
Cambiar el color de todas las imágenes a blanco y negro (100% gris):
img {
filter: grayscale(100%);
}
Consejo:Visite nuestra Manual de referencias de filtros CSS，para obtener más información sobre los filtros CSS.
Superposición de imagen al pasar el ratón
Crear un efecto de superposición al pasar el ratón:
Invertir imagen
Mueva el ratón sobre la imagen:
Ejemplo
img:hover {
transform: scaleX(-1);
}
Biblioteca de imágenes responsiva
Podemos crear una biblioteca de imágenes adaptativa con CSS.
Este ejemplo utiliza consultas de medios para reordenar imágenes en diferentes tamaños de pantalla. Ajuste el tamaño de la ventana del navegador para ver los efectos:
Ejemplo
.responsive {}}
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px){
.responsive {}}
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {}}
width: 100%;
}
}
Consejo:En nuestro Tutorial CSS RWD Aprende más sobre el diseño web responsive en
Ventana modal de imagen (Image Modal)
Este es un ejemplo de cómo CSS y JavaScript pueden trabajar juntos.
Primero, cree una ventana modal (diálogo) con CSS y márquela como oculta por defecto.
Luego, cuando el usuario haga clic en la imagen, muestre una ventana modal con JavaScript y muestra la imagen dentro de la modal:
- Página anterior Herramientas de tooltip CSS
- Página siguiente Propiedad object-fit CSS
