Rumah > hujung hadapan web > tutorial css > Bagaimana untuk menangkap sebahagian daripada imej menggunakan css

Bagaimana untuk menangkap sebahagian daripada imej menggunakan css

WBOY
Lepaskan: 2021-12-10 18:05:58
asal
8016 orang telah melayarinya

Kaedah: 1. Gunakan gaya "kedudukan:mutlak" untuk menetapkan elemen gambar kepada gaya kedudukan mutlak; 2. Gunakan atribut klip untuk memintas gambar dengan gaya kedudukan mutlak elemen {clip:rect" (atas, kanan, bawah, kiri);}".

Bagaimana untuk menangkap sebahagian daripada imej menggunakan css

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Cara menggunakan css untuk memintas sebahagian daripada imej

Dalam css, anda boleh menggunakan atribut klip untuk memintas sebahagian daripada imej, yang boleh digunakan untuk kedudukan mutlak Elemen dipotong.

Jadi kita perlu menetapkan imej kepada gaya kedudukan mutlak dahulu, dan kemudian gunakan atribut klip untuk memintasnya.

Nilai kemungkinan atribut klip adalah seperti berikut:

Bagaimana untuk menangkap sebahagian daripada imej menggunakan css

Contohnya 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>
  <style>
  img{
    position:absolute;
    clip:rect(0px 100px 200px 0px);
  }
  </style>
</head>
<body>
  <img src="1118.02.png" alt="">
</body>
</html>
Salin selepas log masuk

Output hasil:

Bagaimana untuk menangkap sebahagian daripada imej menggunakan css

(Mempelajari perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Bagaimana untuk menangkap sebahagian daripada imej menggunakan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
css
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan