Bagaimana untuk Menyusun Imej Boleh Diklik dalam Bulatan Di Sekitar Imej Tengah?

Letakkan Ikon ke dalam Bulatan

Soalan:

Bagaimana saya boleh meletakkan berbilang imej dalam bulatkan di sekeliling imej lain, menjadikannya semua boleh diklik pautan?

Jawapan:

Penyelesaian 1 (Moden)

Menggunakan HTML, CSS dan JavaScript:

1. Jana HTML dengan pautan imej berdasarkan a tatasusunan.
2. Gunakan CSS untuk meletakkan imej pada bulatan dalam bekas.
3. Laraskan saiz bekas berdasarkan jejari bulatan dan saiz imej.

Penyelesaian 2 (Lama)

Menggunakan CSS transforms:

1. Buat div pembalut untuk bekas bulatan.
2. Letakkan imej sepenuhnya di tengah-tengah pembalut.
3. Gunakan transformasi CSS berantai untuk memutar dan menterjemah imej ke sudut yang dikehendaki.

Kod Coretan:

.circle-container {
  width: 24em;
  height: 24em;
  position: relative;
}

.circle-container a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.deg0 img {
  transform: rotate(0deg);
}

.deg45 img {
  transform: rotate(45deg);
}

.deg90 img {
  transform: rotate(90deg);
}

Atas ialah kandungan terperinci Bagaimana untuk Menyusun Imej Boleh Diklik dalam Bulatan Di Sekitar Imej Tengah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!