image CSS
Ce chapitre va vous montrer comment l'image de mise en page CSS à utiliser.
Photos fillet
Miniatures
Nous utilisons la border propriété pour créer des vignettes.
Exemples
border: 1px solid #DDD;
border-radius: 4px;
padding: 5px;
}
<Img src = "paris.jpg" alt = "Paris">
Essayez »
Exemples
display: inline-block;
border: 1px solid #DDD;
border-radius: 4px;
padding: 5px;
transition: 0,3s;
}
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>
Essayez »
Image Responsive
l'image Responsive s'adaptera automatiquement une variété de tailles d'écran.
Exemple, vous pouvez réinitialiser votre navigateur pour voir la taille de l'effet:
Si vous avez besoin de la liberté à l'échelle de l'image, et l'image pour agrandir la taille de pas supérieure à la valeur maximale de l'original, vous pouvez utiliser le code suivant:
Astuce: le contenu Web peut être plus réactifs référence de conception CSS tutoriels de conception sensibles .
Picture Text
Comment localiser le texte de l'image:
Exemples
Essayez:
Le coin supérieur gauche >> le coin supérieur droit » coin inférieur gauche» en bas à droite >> Centre >>Carte image
Exemples
largeur: 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;
}
Essayez »
Filtres d'image
Le CSS filter attribut pour ajouter des éléments avec des effets visuels (par exemple: Fuzzy et saturation).
Remarque: Internet Explorer ou Safari 5.1 (et versions antérieures) ne supporte pas cette propriété.
Exemples
Modifier toutes les couleurs à des images en noir et blanc (100% gris):
-webkit-filtre: niveaux de gris (100% ); / * Chrome, Safari, Opera * /
filtre: niveaux de gris (100%);
}
Essayez »
Astuce: Visitez le CSS filtre manuel de référence pour plus de contenu.
Responsive Galerie d'images
Exemples
padding: 0 6px;
float: left;
largeur: 24,99999%;
}
@media seulement écran et (max-width : 700px) {
.responsive {
largeur: 49,99999%;
margin: 6px 0;
}
}
@media seulement écran et (max-width : 500px) {
.responsive {
largeur: 100%;
}
}
Essayez »
Photos Modal (modal)
Cet exemple montre comment combiner ensemble CSS et JavaScript pour rendre l'image.
Tout d'abord, nous utilisons CSS pour créer une fenêtre modale (dialogue), est caché par défaut.
Nous utilisons ensuite JavaScript pour afficher une fenêtre modale lorsque l'on clique, l'image sera affichée dans une fenêtre pop-up:
Exemples
var modale = document.getElementById ( 'myModal' );
// Obtenir le mode cadre photo, image alt attributs tels que décrits dans le présent pop chinoise
var img = document.getElementById ( 'myImg' );
var modalImg = document.getElementById ( "img01" );
var CaptionText = document.getElementById ( "caption" );
img.onclick = function () {
modal.style.display = "bloc";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// Obtenez le <span> qui ferme le modal
var durée = document.getElementsByClassName ( "close" ) [0];
// Lorsque l'utilisateur clique sur <span > (x), fermer le modal
span.onclick = function () {
modal.style.display = "none";
}
Essayez »