Bab ini akan memperkenalkan cara menggunakan CSS untuk reka letak imej.

Imej bulat

Contoh

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
img {
    border-radius: 8px;
}
</style>
</head>
<body>
<h2>圆角图片</h2>
<p>使用 border-radius 属性来创建圆角图片:</p>
<img src="https://img.php.cn/upload/course/000/000/004/580989ec73194566.jpg" alt="Paris" width="400" height="300">
</body>
</html>

Contoh

Imej bujur:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
img {
    border-radius: 50%;
}
</style>
</head>
<body>
<h2>椭圆形图片</h2>
<p>使用 border-radius 属性来创建椭圆形图片：</p>
<img src="https://img.php.cn/upload/course/000/000/004/580989ec73194566.jpg" alt="Paris" width="400" height="300">
</body>
</html>


Lakaran kenit

Kami menggunakan atribut border untuk mencipta lakaran kecil.

Instance

img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}
<img src="https://img.php.cn/upload/course/000/000/004/580989ec73194566.jpg" alt="Paris">

Instance

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="https://img.php.cn/upload/course/000/000/004/580989ec73194566.jpg" alt="Paris">
</a>

Imej responsif

Imej responsif akan menyesuaikan diri secara automatik kepada pelbagai saiz skrin.

Dalam contoh, anda boleh menyemak kesannya dengan menetapkan semula saiz penyemak imbas:

Norway

Jika anda perlu menskala imej secara bebas dan saiz yang diperbesarkan imej tidak lebih besar daripada saiznya Untuk nilai maksimum asal, anda boleh menggunakan kod berikut:

Instance

img {
    max-width: 100%;
    height: auto;
}

Cara meletakkan teks imej

Teks imej:

Contoh

Norway
Sudut kiri bawah
Kiri atas sudut
Sudut kanan atas
Sudut kanan bawah
Berpusat

Gaya kad picture

Contoh

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;
}

Penapis Imej

CSS filter atribut digunakan untuk menambah kesan visual ( seperti kabur dan tepu) kepada unsur.

Nota: Internet Explorer atau Safari 5.1 (dan lebih awal) tidak menyokong atribut ini.

Contoh

Tukar warna semua gambar kepada hitam dan putih (100% skala kelabu):

img 
{
    
-webkit-filter:
 grayscale(100%);
 
/* Chrome, Safari, 
Opera */
     
    
filter:
 grayscale(100%);
}

Album gambar responsif

Contoh

.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%;
    }
}


Modal Gambar (modal)

Contoh ini menunjukkan cara menggabungkan CSS dan JavaScript untuk memaparkan imej bersama-sama.

Pertama, kami menggunakan CSS untuk mencipta tetingkap modal (dialog), yang disembunyikan secara lalai.

Kemudian, kami menggunakan JavaScript untuk memaparkan tetingkap modal Apabila kami mengklik pada imej, imej akan dipaparkan dalam tetingkap timbul:

Contoh

<. 🎜>

//Dapatkan tetingkap modal
var modal = document.getElementById('myModal');
// 获取图片模态框，alt 属性作为图片弹出中文本描述
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";
}