Bagaimanakah Saya Boleh Menggayakan Imej Butang Input dan Kesan Hovernya Menggunakan CSS?

Menggayakan Imej Butang Input Menggunakan CSS

Pengenalan

Membuat butang input dengan imej menggunakan HTML adalah mudah, tetapi menukar penampilannya menggunakan CSS boleh menjadi mencabar. Artikel ini menangani isu menambah imej pada butang input dan mengubah suai penampilannya pada tuding menggunakan penyelesaian CSS.

Masalah

Sesetengah pengguna cuba menggunakan CSS untuk menggayakan butang input dengan imej, tetapi menghadapi kesukaran. Mereka mungkin cuba mentakrifkan kelas CSS tersuai tetapi tidak dapat mencapai kesan tuding yang diingini.

Penyelesaian

Untuk menggayakan butang input dengan imej menggunakan CSS, anda perlu menggunakan "jenis sifat." Daripada "type='image'," tetapkan jenis kepada "type='submit.'" Ini membolehkan anda menggunakan CSS untuk mengawal penampilan butang.

<input type="submit">

Setelah butang ditetapkan sebagai butang "serahkan", anda boleh menggunakan gaya CSS pada kelas "myButton" untuk menentukan penampilannya, termasuk menambah imej sebagai latar belakang.

.myButton {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

Dengan ini pendekatan, anda boleh mengubah suai penampilan butang pada tuding dengan menggunakan kelas pseudo ":hover".

.myButton:hover {
    background-color: #ff0000;
}

Penyelesaian CSS ini membolehkan penggayaan dan kesan tuding pada butang input dengan imej, menangani isu yang dihadapi oleh pengguna. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa Safari mungkin tidak menyokong kaedah penggayaan khusus ini. Dalam kes itu, menggunakan imej dan fungsi onclick untuk menyerahkan borang mungkin diperlukan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Imej Butang Input dan Kesan Hovernya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!