Erfahren Sie, wie Bilder, um Stil mit CSS.
Abgerundete Bilder
Verwenden Sie die border-radius - Eigenschaft auf abgerundete Bilder zu erstellen:
Thumbnail Bilder
Verwenden Sie die border Eigenschaft auf Miniaturbilder erstellen.
Vorschaubild:
Beispiel
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
< img src="paris.jpg"
alt="Paris" > Versuch es selber " Minibild als Verweis:
Beispiel
a {
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 > Versuch es selber " Responsive Bilder
Responsive Bilder werden automatisch die Größe des Bildschirms passen anzupassen.
Ändern Sie die Größe des Browser-Fensters um den Effekt zu sehen:
Wenn Sie ein Bild wollen nach unten zu skalieren, wenn er zu, aber nie größer sein skalieren als die ursprüngliche Größe, fügen Sie die folgenden Schritte aus:
Tipp: Lesen Sie mehr über Responsive Web Design in unserem CSS RWD Tutorial .
Bild-Text
Wie man Text in einem Bild zu positionieren:
Beispiel
Versuch es selber:
Oben links » Oben Rechts» Unten links » Unten rechts» Zentriert »Polaroid Bilder / Karten
Die Trollzunge in Hardanger, Norwegen
Nordlichter in Norwegen
Beispiel
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;
} Versuch es selber " Bild-Filter
Die CSS - filter Eigenschaft fügt visuelle Effekte (wie Unschärfe und Sättigung) zu einem Element.
Hinweis: Die Filtereigenschaft wird nicht unterstützt in Internet Explorer, Edge - 12 oder Safari 5.1 und früher.
Beispiel
Ändern Sie die Farbe aller Bilder in Schwarz-Weiß (100% grau):
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}Tipp: Gehen Sie auf unsere CSS - Filter Verweis mehr über CSS - Filter zu lernen.
Responsive Bildgalerie
CSS kann verwendet werden, um Bildgalerien zu erstellen. In diesem Beispiel verwenden Medienanfragen, die Bilder auf unterschiedlichen Bildschirmgrößen neu zu ordnen. Ändern Sie die Größe des Browser-Fensters um den Effekt zu sehen:
Beispiel
.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%;
}
} Versuch es selber " Tipp: Lesen Sie mehr über Responsive Web Design in unserem CSS RWD Tutorial .
Bild Modal (Fortgeschritten)
Dies ist ein Beispiel zu zeigen, wie CSS und JavaScript zusammenarbeiten können.
Erstens, CSS verwenden, um ein modales Fenster (Dialogfeld) zu erstellen, und es standardmäßig ausblenden.
Dann verwenden Sie einen JavaScript das modale Fenster zu zeigen, und das Bild im Inneren des modal angezeigt werden, wenn ein Benutzer auf das Bild klickt:
Beispiel
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it
inside the modal - use its "alt" text as a caption
var img =
document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick =
function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span =
document.getElementsByClassName("close")[0];
// When the user clicks
on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
} Versuch es selber "