CSS obrazu
Ten rozdział pokaże Ci, jak wykorzystać CSS układu obrazu.
filet Zdjęcia
Miniatury
Używamy border
nieruchomości do tworzenia miniaturek.
Przykłady
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
<Img src = "paris.jpg" alt = "Paris">
Spróbuj »
Przykłady
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
Przejście: 0,3 s;
}
: hover {
box-shadow: 2px 0 0 1px rgba
(0, 140, 186, 0,5);
}
<A Href = "paris.jpg">
<Img src = "paris.jpg" alt = "Paris">
</ A>
Spróbuj »
responsive obrazu
Responsive obraz zostanie automatycznie dopasować gamę rozmiarów ekranu.
Przykładowo, można ustawić przeglądarkę, aby zobaczyć wielkość efektu:
Jeśli potrzebujesz swobodę skalowania obrazu, a obraz, aby powiększyć rozmiar nie większy niż maksymalna wartość oryginału, można użyć następującego kodu:
Wskazówka: zawartości sieci Web mogą być bardziej czułe referencyjna konstrukcja CSS tutoriale reaguje projektowe .
Obrazek Tekst
Jak znaleźć tekst obrazu:
Przykłady
Spróbuj:
W lewym górnym rogu >> górny prawy róg » lewy dolny róg» prawym dolnym rogu >> środkowy >>Karta-image
Przykłady
width: 80%;
background-color: white;
box-shadow: 0 4px 8 pikseli 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;
}
Spróbuj »
Filtry graficzne
CSS filter
atrybutów, aby dodać elementy z efektami wizualnymi (np nieostry i nasycenie).
Uwaga: Internet Explorer lub Safari 5.1 (i wcześniejszych) nie obsługuje tej właściwości.
Przykłady
Edycja wszystkich kolorów na czarno-białych zdjęć (100% szary):
-webkit filtr: skala szarości (100% ); / * Chrome, Safari, Opera * /
Filtr: skala szarości (100%);
}
Spróbuj »
Wskazówka: Odwiedź CSS Instrukcja filtrów odniesienia , aby uzyskać więcej treści.
Responsive Galeria zdjęć
Przykłady
padding: 0 6px;
float: left;
Szerokość: 24,99999%;
}
@media tylko ekran i (max-width : 700px) {
.responsive {
Szerokość: 49,99999%;
margin: 6px 0;
}
}
@media tylko ekran i (max-width : 500px) {
.responsive {
width: 100%;
}
}
Spróbuj »
Zdjęcia modalne (modal)
Ten przykład pokazuje, jak połączyć ze sobą CSS i JavaScript do renderowania obrazu.
Po pierwsze, możemy użyć CSS do tworzenia modalnego okna (okno), jest domyślnie ukryty.
Następnie za pomocą JavaScript, aby wyświetlić okno modalne, gdy klikniemy, obraz zostanie wyświetlony w oknie pop-up:
Przykłady
var modal = document.getElementById ( 'myModal' );
// Pobierz tryb ramki na zdjęcia, alt obraz atrybuty w sposób opisany w niniejszym chińskiego popu
var img = document.getElementById ( 'myImg' );
var modalImg = document.getElementById ( "img01" );
var captionText = document.getElementById ( "podpis" );
img.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// Pobierz <span> element, który zamyka modalna
var span document.getElementsByClassName ( "Zamknij" ) [0];
// Gdy użytkownik kliknie na <span > (x), zamknij modalna
span.onclick = function () {
modal.style.display = "none";
}
Spróbuj »