Dowiedz się, jak projektować obrazy za pomocą CSS.
Zaokrąglone Images
Użyj border-radius właściwość tworzenia zaokrąglonych obrazów:
Obrazy Miniatura
Użyj border nieruchomości do tworzenia miniaturek obrazów.
Miniatura:
Przykład
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
< img src="paris.jpg"
alt="Paris" > Spróbuj sam " Obraz miniatur jako Link:
Przykład
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 > Spróbuj sam " reagujących Images
Elastyczne obrazy automatycznie dostosowują się do rozmiaru ekranu.
Zmiana rozmiaru okna przeglądarki, aby zobaczyć efekt:
Jeśli chcesz, to obraz w skali dół, jeśli ma, ale nigdy nie skala się być większy niż jego oryginalnym rozmiarze, należy dodać następujące:
Wskazówka: Więcej o Responsive Web Design w naszej CSS RWD Tutorial .
Tekst Obraz
Jak ustawić tekst w obrazie:
Przykład
Spróbuj sam:
Top Left » Top Right» Lewy dolny » Dolny Prawy» Centered »Polaroid Images / Karty
Język Troll w Hardanger w Norwegii
Northern Lights w Norwegii
Przykład
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;
} Spróbuj sam " Filtry graficzne
CSS filter nieruchomość dodaje efekty wizualne (takie jak rozmycie i nasycenie) do elementu.
Uwaga: Właściwość filtr nie jest obsługiwana w programie Internet Explorer, EDGE 12 lub Safari 5.1 i wcześniejszych.
Przykład
Zmień kolor wszystkich zdjęć do czerni i bieli (100% szarości):
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}Porada: Przejdź do naszego filtra CSS , aby dowiedzieć się więcej na temat filtrów CSS.
Responsive Galeria zdjęć
CSS może być używany do tworzenia galerii obrazu. Ten przykład używać zapytań o media ponownie zorganizować obrazy w różnych rozmiarach ekranu. Zmiana rozmiaru okna przeglądarki, aby zobaczyć efekt:
Przykład
.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%;
}
} Spróbuj sam " Wskazówka: Więcej o Responsive Web Design w naszej CSS RWD Tutorial .
Obraz modalna (zaawansowane)
To jest przykład wykazać, jak CSS i JavaScript mogą ze sobą współpracować.
Po pierwsze, należy użyć CSS, aby utworzyć okno modalne (okno dialogowe) i ukrycie go domyślnie.
Następnie użyj JavaScript, aby pokazać modalne okno, aby wyświetlić obraz wewnątrz modal, gdy użytkownik kliknie na obrazek:
Przykład
// 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";
} Spróbuj sam "