CSS Bild
Dieses Kapitel zeigt Ihnen, wie CSS-Layout-Bild zu verwenden.
Fillet Fotos
thumbnails
Wir verwenden die border Eigenschaft zu Thumbnails erstellen.
Beispiele
border: 1px solid #DDD;
border-radius: 4px;
padding: 5px;
}
<Img src = "paris.jpg" alt = "Paris">
Versuchen »
Beispiele
display: inline-block;
border: 1px solid #DDD;
border-radius: 4px;
padding: 5px;
Übergang: 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>
Versuchen »
Responsive Bild
Responsive Bild wird eine Vielzahl von Bildschirmgrößen automatisch passen.
Beispiel, können Sie Ihren Browser so einstellen, die Effektgröße zu sehen:
Wenn Sie die Freiheit brauchen um das Bild zu skalieren, und das Bild, um die Größe von nicht mehr als der Maximalwert des Originals zu vergrößern, können Sie den folgenden Code verwenden:
Tipp: Web - Inhalte können mehr Responsive Design Referenz sein CSS Responsive Design - Tutorials .
Bild Text
Wie das Bild Text zu suchen:
Beispiele
Versuchen:
Die obere linke Ecke >> die rechte obere Ecke » linke untere Ecke» unten rechts >> Zentrum >>Karte-Bild
Beispiele
Breite: 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;
}
Versuchen »
Bild-Filter
Die CSS filter Elemente mit visuellen Effekten (zum Beispiel: Fuzzy und Sättigung) hinzuzufügen.
Hinweis: Internet Explorer oder Safari 5.1 (und früher) diese Eigenschaft nicht unterstützt.
Beispiele
Bearbeiten Sie alle Farben in Schwarz-Weiß-Bilder (100% grau):
-webkit-Filter: Graustufen (100% ); / * Chrome, Safari, Opera * /
Filter: Graustufen (100%);
}
Versuchen »
Tipp: Besuchen Sie die CSS - Filter - Referenzhandbuch für mehr Inhalt.
Responsive Bildgalerie
Beispiele
padding: 0 6px;
float: left;
Breite: 24,99999%;
}
@media nur Bildschirm und (max-width : 700px) {
.responsive {
Breite: 49,99999%;
margin: 6px 0;
}
}
@media nur Bildschirm und (max-width : 500px) {
.responsive {
Breite: 100%;
}
}
Versuchen »
Bilder Modal (modal)
Dieses Beispiel zeigt, wie CSS und JavaScript, um miteinander zu verknüpfen, um das Bild zu machen.
Erstens haben wir CSS verwenden, um ein modales Fenster (Dialog) zu erstellen, wird standardmäßig ausgeblendet.
Wir verwenden JavaScript dann ein modales Fenster angezeigt werden, wenn wir klicken, wird das Bild in einem Popup-Fenster angezeigt werden:
Beispiele
var modal = document.getElementById ( 'myModal' );
// Den Bilderrahmen - Modus, Attribute alt Bild wie im vorliegenden Chinese Pop beschrieben
var img = document.getElementById ( 'myImg' );
var modalImg = document.getElementById ( "IMG01" );
var CaptionText = document.getElementById ( "Titel" );
img.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// Holen Sie sich das <span> -Element , das die modale schließt
var Span = document.getElementsByClassName ( "close" ) [0];
// Wenn der Benutzer auf klickt <span > (x), schließen Sie das modale
span.onclick = function () {
modal.style.display = "none";
}
Versuchen »