imagen CSS
Este capítulo le mostrará cómo la imagen de diseño CSS para su uso.
Fotos de filete
miniaturas
Usamos la border propiedad para crear imágenes en miniatura.
Ejemplos
frontera: #ddd sólido 1px;
la frontera de radio: 4 píxeles;
padding: 5px;
}
<Img src = "paris.jpg" alt = "Paris">
Trate »
Ejemplos
display: inline-block;
frontera: #ddd sólido 1px;
la frontera de radio: 4 píxeles;
padding: 5px;
transición: 0,3 s;
}
a: hover {
box-shadow: 0 0 2px 1px RGBA
(0, 140, 186, 0,5);
}
<A Href = "paris.jpg">
<Img src = "paris.jpg" alt = "Paris">
</ A>
Trate »
imagen sensible
imagen Responsive se ajuste automáticamente una variedad de tamaños de pantalla.
Por ejemplo, usted puede configurar su navegador para ver el tamaño del efecto:
Si necesita la libertad para escalar la imagen, y la imagen para agrandar el tamaño no mayor que el valor máximo del original, puede utilizar el siguiente código:
Consejo: contenido Web puede ser más sensibles a la referencia de diseño CSS tutoriales de diseño sensible .
Texto foto
Cómo localizar el texto de la imagen:
Ejemplos
Probar:
La esquina superior izquierda >> la esquina superior derecha » en la esquina inferior izquierda» esquina inferior derecha >> Centro >>Tarjeta de imagen
Ejemplos
anchura: 80%;
background-color: blanco;
box-shadow: 0 0 8 píxeles 4PX 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;
}
Trate »
filtros de imagen
El CSS filter de atributos para agregar elementos con efectos visuales (por ejemplo: Fuzzy y saturación).
Nota: Internet Explorer o Safari 5.1 (y versiones anteriores) no admite esta propiedad.
Ejemplos
Editar todos los colores a las imágenes en blanco y negro (100%) de color gris:
-webkit-filtro: escala de grises (100% ); / * Chrome, Safari, Opera * /
filtro: escala de grises (100%);
}
Trate »
Consejo: Visita a la CSS Manual del filtro de referencia para más contenido.
Galería de imágenes sensible
Ejemplos
padding: 0 6px;
float: left;
anchura: 24,99999%;
}
@media única pantalla y (max-ancho : 700px) {
.responsive {
anchura: 49,99999%;
margen: 6px 0;
}
}
@media única pantalla y (max-ancho : 500px) {
.responsive {
width: 100%;
}
}
Trate »
Fotos modal (modal)
Este ejemplo demuestra cómo combinar juntos CSS y JavaScript para procesar la imagen.
En primer lugar, usamos CSS para crear una ventana modal (de diálogo), se oculta de forma predeterminada.
A continuación, utilizamos JavaScript para visualizar una ventana modal cuando se hace clic, la imagen se muestra en una ventana emergente:
Ejemplos
var modal = document.getElementById ( 'myModal' );
// Obtener el modo de marco de imagen, atributos alt de la imagen como se describe en el presente pop china
var img = document.getElementById ( 'MyIMG' );
var modalImg = document.getElementById ( "img01" );
var CaptionText = document.getElementById ( "subtítulo" );
img.onclick = function () {
modal.style.display = "bloque";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// Obtener el elemento <span> que cierra el modal
lapso var = document.getElementsByClassName ( "cerrar" ) [0];
// Cuando el usuario hace clic en <span > (x), cerrar el modal
span.onclick = function () {
modal.style.display = "none";
}
Trate »