Bagaimanakah Saya Boleh Mengubah Imej Butang Secara Dinamik Menggunakan CSS?

Mencapai Perubahan Imej Butang Dinamik dengan CSS

Apabila membuat butang input dengan imej yang berkaitan, kaedah tradisional melibatkan penggunaan "type= atribut 'imej'. Walau bagaimanapun, CSS menyediakan kawalan terhad ke atas butang tersebut. Untuk mengatasi halangan ini, mari kita terokai teknik mudah untuk menggayakan butang dengan imej menggunakan atribut "type='submit'" yang lebih serba boleh.

Daripada menggunakan "type='image'," pertimbangkan untuk menukar kepada "type ='submit'" untuk butang anda. Pelarasan ini akan membolehkan anda menentukan imej latar belakang tersuai melalui CSS. Berikut ialah contoh:

<input type='submit'>

Seterusnya, tentukan kelas CSS "myButton" dalam helaian gaya anda:

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

Kod ini akan memaparkan butang dengan imej yang ditentukan sebagai latar belakangnya. Untuk meningkatkan lagi pengalaman pengguna, anda boleh menambah kesan tuding menggunakan kelas pseudo ":hover":

.myButton:hover {
    background: url(/images/Btn_Hover.PNG) no-repeat;
}

Perhatikan bahawa butang penggayaan mengikut cara yang diterangkan mungkin tidak disokong dalam penyemak imbas tertentu, seperti Safari. Untuk kes sedemikian, penyelesaian alternatif seperti meletakkan imej dan melaksanakan pengendali acara onclick disyorkan untuk memastikan keserasian merentas penyemak imbas.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Imej Butang Secara Dinamik Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!