Bagaimanakah Saya Boleh Membungkus Teks Di Sekitar Imej Bukan Segi Empat Menggunakan CSS?

Balut Teks Di Sekitar Imej Bukan Segi Empat: Panduan

Bolehkah teks dibalut pada imej yang bukan segi empat tepat? Untuk mencapai kesan ini, apabila teks menepati bentuk negara atau bentuk tidak sekata lain yang lancar, mari kita teroka kaedah yang dikongsi oleh Tory Lawson dalam catatan blog.

Langkah 1: Wujudkan Kawasan Bungkus

Mulakan dengan mengenal pasti kawasan di mana teks harus dibalut. Ini boleh dilakukan menggunakan perisian penyuntingan imej seperti Fireworks. Sediakan grid dengan jarak yang sesuai, kemudian lukis garis sempadan yang mewakili kedudukan hujung teks yang diingini, mengambil kira pelapik sedikit.

Langkah 2: Buat Senarai

Ukur lebar bentuk tidak sekata ini pada selang waktu yang dipratentukan (cth., 10 piksel). Catatkan ukuran ini dalam senarai. Senarai ini akan membimbing penciptaan div dalam langkah seterusnya.

Langkah 3: Bina Div dan Gunakan CSS

Buat elemen div untuk setiap ukuran dalam senarai dan sarang mereka dalam div pembalut. Terapungkan div ini ke kanan dan pastikan ia mengosongkan sebarang unsur terapung kanan. Akhir sekali, tetapkan ketinggian dan lebar div pembalut dan imej latar belakang bentuk tidak sekata.

Contoh Kod

Berikut ialah contoh kod ringkas berdasarkan kaedah Tory Lawson :

<div>
<pre class="brush:php;toolbar:false">#wrapper {
  width: 634px;
  height: 428px;
  display: block;
  background-image: url("headshot.jpg");
}
.spacer {
  display: block;
  float: right;
  clear: right;
}
p {
  display: inline;
  color: #FFF;
}

Dengan mengikuti langkah ini, anda boleh membungkus teks dengan berkesan imej bukan segi empat tepat, membenarkan teks mengalir secara semula jadi di sekeliling kontur bentuk kompleks. Walaupun tidak semudah pilihan CSS "balut teks" khusus, kaedah ini menyediakan penyelesaian untuk mencipta kesan visual yang memberi kesan dalam reka bentuk web.