Rumah >hujung hadapan web >tutorial css >Cara menggunakan css untuk klik pada imej untuk membesarkannya
Cara menggunakan css untuk klik pada imej untuk membesarkannya
- WBOYasal
- 2021-11-18 16:11:5019395semak imbas
Dalam CSS, anda boleh menggunakan pemilih ":active" dan mengubah atribut untuk mencapai kesan klik pada imej untuk membesarkannya Sintaks ialah "elemen gambar: active{transform:scale(width magnification,. pembesaran ketinggian);
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Cara menggunakan css untuk membesarkan gambar dengan mengklik padanya
Buat fail html baharu, bernama test.html, untuk menerangkan cara untuk menggunakan css untuk merealisasikan klik tetikus Gambar digandakan saiznya.
Dalam teg css, gunakan atribut transform dan tetapkan dua parameter atribut skala kepada 2 untuk menggandakan saiz imej. transform:scale(2,2);
Gunakan pemilih :aktif Pemilih :aktif digunakan untuk memilih pautan aktif. Iaitu, operasi dilakukan apabila gambar diklik.
Kod sampel adalah seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style type="text/css">
div{
width:350px;
height:250px;
background:url(1118.01.png);
}
div:active{
margin:100px;
transform:scale(2,2);
}
</style>
<div></div>
</body>
</html>Buka fail test.html dalam penyemak imbas untuk melihat kesannya.
Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !
Atas ialah kandungan terperinci Cara menggunakan css untuk klik pada imej untuk membesarkannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!