image CSS
Bab ini akan menunjukkan kepada Anda bagaimana menggunakan CSS tata letak gambar.
fillet Foto
thumbnail
Kami menggunakan border properti untuk membuat thumbnail.
contoh
border: 1px #ddd padat;
border-radius: 4px;
padding: 5px;
}
<Img src = "paris.jpg" alt = "Paris">
Coba »
contoh
display: inline-block;
border: 1px #ddd padat;
border-radius: 4px;
padding: 5px;
transisi: 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>
Coba »
image responsif
image responsif secara otomatis akan sesuai dengan berbagai ukuran layar.
Misalnya, Anda dapat mengatur ulang browser Anda untuk melihat efek ukuran:
Jika Anda perlu kebebasan untuk skala gambar, dan gambar untuk memperbesar ukuran tidak lebih besar dari nilai maksimum asli, Anda dapat menggunakan kode berikut:
Tip: konten web dapat lebih responsif referensi desain CSS desain responsif tutorial .
gambar Teks
Bagaimana menemukan teks gambar:
contoh
Coba:
Pojok kiri atas >> pojok kanan atas » pojok kiri» pojok kanan bawah >> pusat >>Kartu-gambar
contoh
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;
}
Coba »
Filter gambar
CSS filter atribut untuk menambahkan elemen dengan efek visual (misalnya: Fuzzy dan saturasi).
Catatan: Internet Explorer, atau Safari 5.1 (dan sebelumnya) tidak mendukung properti ini.
contoh
Mengedit semua warna untuk gambar hitam dan putih (100% abu-abu):
-webkit-filter: grayscale (100% ); / * Chrome, Safari, Opera * /
filter: grayscale (100%);
}
Coba »
Tip: Kunjungi Pedoman penyaring Referensi CSS untuk konten lebih.
Responsif Galeri
contoh
padding: 0 6px;
float: kiri;
width: 24,99999%;
}
@media hanya layar dan (max-width : 700px) {
.responsive {
width: 49,99999%;
margin: 6px 0;
}
}
@media hanya layar dan (max-width : 500px) {
.responsive {
width: 100%;
}
}
Coba »
Gambar Modal (modal)
Contoh ini menunjukkan bagaimana menggabungkan bersama-sama CSS dan JavaScript untuk membuat gambar.
Pertama, kita menggunakan CSS untuk membuat jendela modal (dialog), tersembunyi secara default.
Kami kemudian menggunakan JavaScript untuk menampilkan jendela modal ketika kita klik, gambar akan ditampilkan di jendela pop-up:
contoh
var modal = document.getElementById ( 'myModal' );
// Dapatkan mode bingkai foto, alt image atribut seperti yang dijelaskan dalam pop Cina ini
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;
}
// Dapatkan <span> elemen yang menutup modal yang
var rentang = document.getElementsByClassName ( "dekat" ) [0];
// Ketika pengguna mengklik <span > (x), menutup modal yang
span.onclick = function () {
modal.style.display = "none";
}
Coba »