Selesaikan masalah radius sempadan: 50% menyebabkan ubah bentuk imej dan bayang-bayang yang tidak dijangka

Artikel ini bertujuan untuk menyelesaikan masalah penyimpangan imej dan bayang-bayang yang tidak dijangka yang mungkin berlaku apabila menanam imej ke dalam bulatan menggunakan `radius sempadan: 50%`. Alasan utama ialah fail imej (terutamanya PNGs) mengandungi sempadan telus atau padding. Tutorial ini akan menerangkan punca utama masalah secara terperinci dan memberikan penyelesaian untuk memastikan rendering pekeliling yang sempurna melalui pengoptimuman pra -pengoptimuman imej dan CSS, membantu pemaju mengelakkan kecacatan visual yang biasa.

Dalam pembangunan web, kita sering perlu memaparkan imej (seperti avatar pengguna, logo, dan lain -lain) dalam bentuk bulat. CSS Sempadan-Radius: 50% adalah cara yang biasa dan berkesan untuk mencapai kesan ini. Walau bagaimanapun, pemaju kadang -kadang menemui tepi yang tidak teratur dan tepi gambar bergerigi selepas menggunakan gaya ini. Walaupun tanpa menetapkan kotak bayang-bayang, keabnormalan visual yang serupa dengan bayang-bayang muncul di bahagian bawah dan sisi imej. Artikel ini akan menyelidiki penyebab utama masalah ini dan menyediakan satu set penyelesaian lengkap.

Analisis Masalah: Radius Sempadan: Kegagalan 50% dan bayangan yang tidak dijangka

Apabila elemen imej diberikan radius sempadan: gaya 50%, CSS akan cuba memangkasnya ke dalam bulatan yang sempurna. Tanaman ini didasarkan pada kotak kandungan elemen imej. Jika imej itu sendiri bukan persegi, atau fail imej mengandungi sempadan telus, padding, atau bentuk yang tidak teratur, kesan visual akhir mungkin bukan bulatan yang sempurna walaupun radius sempadan: 50% ditetapkan.

Khususnya, masalah ini lebih menonjol untuk imej PNG dengan kawasan telus. Walaupun piksel telus dalam fail imej tidak dapat dilihat secara visual, mereka masih menduduki kawasan kandungan imej. Apabila radius sempadan digunakan, ia akan menanam di sepanjang sempadan keseluruhan kandungan imej, termasuk piksel telus ini. Jika piksel telus membuat bentuk yang tidak teratur atau "ruang putih" tambahan di tepi kandungan imej, bulatan yang dipotong akan kelihatan "missy".

Bagi "bayang-bayang" yang tidak dijangka, ini biasanya bukan bayang-bayang kotak CSS yang benar, tetapi artifak visual yang dibuat apabila piksel telus bercampur dengan warna latar belakang, atau terdapat perbezaan yang tidak mencukupi di antara tepi imej dan warna latar belakang, menyebabkan tepi telus kelihatan seperti bayang-bayang kabur. Tingkah laku ini mungkin berlaku walaupun bayang-bayang kotak: tiada; ditetapkan secara eksplisit.

Penyelesaian: Preprocessing imej adalah kunci

Inti menyelesaikan masalah seperti ini terletak pada proses pra -proses . Pastikan bahawa imej yang digunakan untuk penanaman sudut bulat itu sendiri "bersih", iaitu kawasan kandungannya tepat sesuai dengan bulatan yang dimaksudkan.

1. Keluarkan sempadan telus atau padding dari gambar

Ini adalah langkah paling kritikal dalam menyelesaikan masalah. Jika imej anda (terutamanya dalam format PNG) mempunyai kawasan kosong telus di sekitar kandungan teras (seperti grafik logo), kawasan ini akan mengganggu pengiraan radius sempadan.

Langkah Operasi:

• Gunakan perisian pengeditan imej profesional (seperti Adobe Photoshop, GIMP, foto afiniti) atau alat penyuntingan imej dalam talian.
• Buka fail gambar anda.
• Tanaman imej supaya teras imej (seperti logo itu sendiri) sesuai dengan tepi tepi imej dan imej itu adalah persegi . Sebagai contoh, jika logo anda adalah bulatan, pastikan ia berada pada kanvas persegi dan bulatan itu hampir dengan atau mengisi empat sisi kanvas yang mungkin.
• Simpan imej yang dipotong, sebaiknya masih dalam format PNG untuk mengekalkan ketelusan, tetapi pastikan tiada sempadan telus yang tidak perlu.

Contoh: Katakan anda mempunyai logo, yang sendiri adalah bulatan, tetapi saiz fail imej adalah 100x100 piksel, dan logo sebenarnya hanya menduduki 80x80 piksel tengah, dikelilingi oleh sempadan telus 10 pixel. Anda perlu menanam imej ke dalam persegi 80x80 pixel, hanya mengandungi logo itu sendiri.

2. Pastikan kandungan imej adalah persegi

Untuk Radius Sempadan: 50% untuk berfungsi dengan baik, elemen imej yang digunakan untuk (atau kandungan imej di dalamnya) harus persegi.

• Jika logo anda sendiri adalah persegi, selepas menanamnya ke dalam persegi, radius sempadan: 50% akan mengubahnya dengan sempurna menjadi bulatan.
• Jika logo anda sendiri tidak teratur tetapi anda mahu meletakkannya dalam bekas bulat, pastikan imej yang dipotong berpusat pada kanvas persegi dan tidak mempunyai kawasan telus tambahan.

3. Pengoptimuman CSS yang dibantu

Selepas memastikan bahawa imej itu sendiri diproses dengan betul, menubuhkan CSS menjadi mudah dan berkesan.

 html {
  saiz font: 62.5%; /* Tetapan saiz fon asas*/
}
badan {
  Margin: 0; /* Keluarkan margin lalai*/
  Padding: 0; /* Keluarkan padding lalai*/
}

/ * Definisi font (tidak berkaitan dengan soalan teras, tetapi disimpan sebagai contoh) */
@font-face {
  Font-Family: "Apercu";
  src: url (../ fonts/apercu \ biasa.otf) format ("OpenType");
  Font-Weight: Normal;
}
@font-face {
  Font-Family: "Aller";
  src: url (../ fonts/aller/aller_std_rg.ttf) format ("OpenType");
  Font-Weight: Normal;
}

/ * Gaya bar navigasi (tidak berkaitan dengan soalan teras, tetapi disimpan sebagai contoh) */
.NAVBAR {
  Paparan: Flex;
  Lebar: 100%;
  ketinggian: 8rem;
  latar belakang warna: #08B3A1;
  Latar Belakang: 13px 10px;
  Imej latar belakang: Linear-Gradient (
    45deg,
    telus 48%,
    #fff5ee 48%,
    #fff5ee 52%,
    Telus 52%
  );
  Align-item: pusat;
}
.logo-title-container {
  Paparan: Flex;
  Gap: 1rem;
  Align-item: pusat;
  / * Pastikan tidak ada bayang-bayang kotak yang tidak dijangka di sini */
  Box-shadow: Tiada; 
}

/*Gaya logo teras*/
.logo {
  margin-kiri: 2rem;
  lebar: 4.4rem; /* Tetapkan lebar. Adalah disyorkan untuk menetapkan ketinggian ke nilai yang sama untuk memastikan bentuk persegi*/
  ketinggian: 4.4rem; /* Secara eksplisit menetapkan ketinggian untuk memastikan elemennya adalah persegi*/
  Radius sempadan: 50%; /* Memohon sudut bulat*/
  Box-shadow: Tiada; /* Pastikan tiada bayang -bayang yang tidak dijangka*/
  Sempadan: Tiada; /* Pastikan tiada sempadan*/
  / * Jika kandungan imej bukan persegi yang sempurna, tetapi perlu mengisi bekas bulat, anda boleh menggunakan objek-sesuai */
  Objek-Fit: Cover; 
  /* Objek-Fit: Penutup akan menanam imej untuk mengisi bekas, mengekalkan nisbah aspek.
     Tetapi untuk logo, amalan terbaik adalah untuk mengedit imej secara langsung untuk menjadikannya persegi. */
}
.header-left-title {
  saiz font: 3rem;
  Font-Family: "Aller";
  Font-Weight: Normal;
  Warna: RGB (228, 230, 229);
}

 

    <meta charset="utf-8">
    <meta http-equiv="x-ua-comple content" content="ie = edge">
    <meta name="viewport" content="width = peranti-lebar, skala awal = 1.0">
    <link rel="stylesheet" href="/styles/style.css"> 

    <tirly> Web Scraper 1.0 


    <header class="navbar">
        <div class="logo-title-container">
          
          <i> <a href="https://imgbb.com/"> <img class="logo" src="https://i.ibb.co/t0qwp4v/2-objects.png" alt="2-objects"> Razor 
        </a></i>
</div>
   </header>

</tirly>

Perkara yang perlu diperhatikan:

• Lebar dan Ketinggian: Adalah penting untuk menetapkan nilai lebar dan ketinggian yang sama untuk elemen .logo (contohnya, lebar: 4.4rem; ketinggian: 4.4rem;). Ini memastikan bahawa kontena yang mana radius sempadan: 50% digunakan adalah persegi. Jika bekas tidak persegi, walaupun imejnya sempurna, tanaman akan menjadi bujur.
• Objek-Fit: Cover;: Object-Fit: Cover; adalah atribut yang berguna apabila nisbah aspek imej itu sendiri tidak sepadan dengan bekas, tetapi anda mahu imej mengisi keseluruhan bekas dan menanam bahagian yang berlebihan. Walau bagaimanapun, untuk imej seperti logo yang perlu dipaparkan dengan tepat, amalan terbaik masih untuk mengedit imej secara langsung.
• Box-shadow: Tiada; dan Sempadan: Tiada;: Simpan sifat -sifat ini untuk memastikan tiada gangguan gaya tambahan.

Meringkaskan

Apabila menggunakan radius sempadan: 50% untuk membuat imej bulat, penyebab utama penyimpangan atau bayang-bayang yang tidak dijangka sering tidak menjadi masalah dengan kod CSS itu sendiri, tetapi masalah dengan fail imej sumber . Dengan memeriksa dengan teliti dan mengeluarkan sempadan telus yang tidak perlu atau padding dalam imej, memastikan bahawa kandungan teras imej berada dalam kawasan persegi, dan menggunakan tetapan saiz CSS yang betul, anda boleh dengan mudah mencapai kesan imej pekeliling yang sempurna. Preprocessing imej adalah cara asas untuk menyelesaikan masalah visual tersebut.

Atas ialah kandungan terperinci Selesaikan masalah radius sempadan: 50% menyebabkan ubah bentuk imej dan bayang-bayang yang tidak dijangka. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!