Apabila memohon `radius sempadan: 50%` ke imej PNG dengan tepi telus untuk menghasilkan kesan bulat, adalah perkara biasa untuk mempunyai tepi yang tidak teratur atau "bayang-bayang" yang tidak dijangka dalam imej. Ini biasanya disebabkan oleh `radius sempadan` yang bertindak pada kotak terikat sebenar imej (termasuk piksel telus), bukan hanya kandungan yang kelihatan. Penyelesaian teras terletak pada pra -proses imej, iaitu, menanam tepi telus yang berlebihan dari imej PNG untuk memastikan bahawa kandungan imej itu sendiri adalah persegi atau bulat, dengan itu mencapai paparan bulat yang sempurna.

Fahami bagaimana radius sempadan: 50% berfungsi

Dalam CSS, Radius Sempadan: 50% adalah cara biasa untuk menjadikan elemen ke dalam bulatan atau bujur. Ia menetapkan radius empat sudut elemen hingga separuh lebar atau ketinggian elemen, menghasilkan bulatan yang sempurna (jika elemen adalah persegi) atau elips (jika elemen adalah segi empat tepat). Walau bagaimanapun, "elemen" di sini merujuk kepada kotak kandungannya , termasuk mana -mana kawasan piksel telus.

Apabila kita memohon Radius Sempadan: 50% kepada tag , CSS cuba untuk mengira dan memohon sudut bulat berdasarkan dimensi yang wujud dalam imej (termasuk kawasan telus di dalamnya).

Masalah yang disebabkan oleh tepi gambar PNG yang telus

Masalah masalah terletak pada tepi telus imej PNG. Banyak imej, terutamanya ikon dan logo yang dieksport dari perisian reka bentuk atau dimuat turun dari web, mungkin mengandungi sempadan yang lebih besar, persegi atau segi empat tepat dengan mengisi telus dalam fail itu sendiri, walaupun kandungan teras yang kelihatan adalah bulatan.

Apabila Radius Sempadan: 50% digunakan untuk imej seperti ini, CSS tidak mengenali dan mengabaikan piksel telus ini. Sebaliknya, ia merawat piksel telus ini sebagai sebahagian daripada imej dan percubaan untuk mengelilingi sudut kotak terikat keseluruhan imej, termasuk kawasan telus. Ternyata:

1. Lingkaran yang tidak teratur: Jika kandungan imej yang kelihatan tidak berpusat di dalam kotak terikatnya, atau kotak sempadan itu sendiri tidak persegi, maka kesan visual akhir tidak akan menjadi lingkaran yang sempurna, walaupun dengan radius sempadan: 50% digunakan. Kehadiran kawasan telus boleh membuat fillet kelihatan "dipotong" atau "diregangkan".
2. "Hantu" Shadow atau Sempadan: Fenomena ini bukan bayangan sebenar yang dihasilkan oleh harta box-shadow CSS. Biasanya kesan visual di mana kandungan yang tidak telus dari imej memenuhi kawasan telus. Apabila penyemak imbas menjadikan imej dengan tepi telus dan memohon sudut bulat, jika kandungan imej yang kelihatan tidak sesuai dengan laluan bulat yang dicipta oleh radius sempadan, maka batas segi empat tepat asal imej (walaupun telus) mungkin kelihatan kabur atau "ketinggalan" di beberapa pelayar atau di bawah. Di samping itu, jika imej itu sendiri mempunyai tepi yang tidak telus atau kesan anti-aliasing, ini akan kelihatan mendadak selepas pembulatan.

Penyelesaian: Preprocessing imej

Cara yang paling mudah dan berkesan untuk menyelesaikan masalah ini adalah untuk memproses imej , iaitu keluarkan semua tepi telus yang berlebihan sebelum menggunakannya di laman web.

Langkah:

1. Imej tanaman: Gunakan perisian penyuntingan imej (seperti Photoshop, GIMP, foto afiniti, dll) untuk membuka imej PNG.
2. Keluarkan piksel telus: Tanaman imej supaya kotak terikatnya ketat mengelilingi kandungan imej yang kelihatan. Jika sasaran adalah bulatan, pastikan imej yang dipotong adalah persegi dan kandungan bulatan mengisi persegi dengan sempurna.
3. Simpan sebagai fail PNG baru: Pastikan untuk mengekalkan ketelusan apabila menyimpan.

Dengan cara ini, apabila radius sempadan: 50% digunakan untuk imej yang dipotong, ia bertindak pada kotak sempadan yang ketat, menjadikan kesan bulat dengan sempurna sambil mengeluarkan mana-mana tepi yang tidak teratur dan bayang-bayang "hantu".

Kod contoh

Katakan kita mempunyai imej yang dipanggil logo_cropped.png yang telah dipotong ke dalam persegi dan kandungan yang kelihatan di dalamnya adalah bulatan.

Struktur HTML:

 


    <meta charset="utf-8">
    <meta name="viewport" content="width = peranti-lebar, skala awal = 1.0">
    <twite> Contoh Logo Pekeliling 
    <link rel="stylesheet" href="styles.css">


    <header class="navbar">
        <div class="logo-container">
            <img class="logo" src="logo_cropped.png" alt="logo syarikat">
            <h1 class="header-title"> Nama Syarikat </h1>
        </div>
    </header>

</twite>

Gaya CSS (Styles.css):

 badan {
    font-family: sans-serif;
    Margin: 0;
    latar belakang warna: #F4F4F4;
}

.NAVBAR {
    Paparan: Flex;
    Align-item: pusat;
    ketinggian: 8rem;
    latar belakang warna: #08B3A1;
    Padding: 0 2rem;
}

.logo-container {
    Paparan: Flex;
    Align-item: pusat;
    Gap: 1rem;
}

.logo {
    lebar: 4.4rem; /* Tetapkan lebar tetap untuk memastikan imej itu persegi*/
    ketinggian: 4.4rem; /* Pastikan ia konsisten dengan lebar dan pastikan ia adalah persegi*/
    Radius sempadan: 50%; /* Memohon sudut bulat*/
    / * Pastikan tidak ada bayang-bayang kotak yang tidak dijangka */
    Box-shadow: Tiada; 
    /* Pastikan tiada sempadan yang tidak dijangka*/
    Sempadan: Tiada; 
    / * Jika perkadaran imej tidak sepadan, anda boleh menggunakan objek-fit */
    Objek-Fit: Cover; 
}

.header-title {
    saiz font: 3rem;
    Warna: RGB (228, 230, 229);
    Margin: 0;
}

Dalam kod di atas, kunci adalah gaya .logo:

• Lebar dan ketinggian ditetapkan pada nilai yang sama (misalnya 4.4rem), yang memastikan bahawa elemen itu sendiri adalah persegi.
• Radius sempadan: 50% digunakan untuk elemen persegi ini, menghasilkan bulatan yang sempurna.
• Box-shadow: Tiada; dan sempadan: tidak; digunakan untuk menghapuskan mana -mana bayang -bayang atau sempadan yang boleh diwarisi dari gaya lalai atau unsur induk, walaupun dengan imej yang dipotong dengan betul ini biasanya bukan sumber masalah.
• Objek-Fit: Cover; adalah atribut pilihan yang menanam imej untuk mengisi elemen sambil mengekalkan nisbah aspeknya jika perkadaran asal imej tidak sepadan dengan persegi yang ditakrifkan oleh lebar/ketinggian. Tetapi amalan terbaik masih untuk pra-tanaman imej.

Nota dan ringkasan

• Pengoptimuman imej adalah kunci: Sentiasa mengutamakan menyelesaikan masalah dengan imej itu sendiri semasa peringkat penyuntingan imej. Ini bukan sahaja dapat menyelesaikan keabnormalan paparan, tetapi juga mengurangkan saiz fail dan meningkatkan kelajuan pemuatan halaman web.
• Semak alat pemaju penyemak imbas anda: Jika anda menghadapi masalah yang sama, gunakan alat pemaju penyemak imbas anda untuk memeriksa dimensi sebenar dan kotak sempadan elemen. Ini dapat membantu anda mengesahkan bahawa radius sempadan bertindak di kawasan yang dimaksudkan.
• Elakkan gaya berlebihan: secara eksplisit menetapkan kotak bayang-bayang: Tiada; dan sempadan: tidak; Boleh menghapuskan kemungkinan sifat -sifat ini yang menyebabkan masalah, tetapi jika sumber masalah adalah kelebihan telus imej, sifat -sifat CSS ini tidak dapat menyelesaikannya secara langsung.

Dengan memahami mekanisme kerja radius sempadan dan kesan tepi telus imej PNG, dan mengamalkan strategi teras preprocessing imej, kita dapat menyelesaikan masalah radius sempadan: 50% lingkaran yang tidak teratur dan bayang-bayang "hantu" yang muncul pada imej, memastikan bahawa unsur-unsur halaman web yang sempurna ditimbulkan seperti yang diharapkan.

Atas ialah kandungan terperinci Radius sempadan tetap: 50% menyebabkan paparan imej yang tidak normal dan masalah bayangan 'hantu'. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!