Bagaimana untuk menulis kod butang gambar css-tutorial css-php.cn

Bagaimana untuk menulis kod butang gambar css

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Lepaskan： 2021-12-03 16:52:07

asal

5580 orang telah melayarinya

Atribut imej latar belakang boleh digunakan dalam css untuk mencapai kesan butang gambar, yang ditulis sebagai "elemen butang {background-image:url(picture path)}" atribut imej latar belakang digunakan untuk menetapkan imej latar belakang elemen Gunakan ini Hanya tambahkan imej latar belakang pada elemen butang menggunakan atribut.

Bagaimana untuk menulis kod butang gambar css

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Cara menulis kod butang gambar css

Dalam css, kita boleh menggunakan atribut imej latar belakang untuk menetapkan butang gambar, latar belakang- kegunaan imej Untuk menetapkan imej latar belakang elemen.

Cuma tambahkan gaya background-image:url (laluan imej) pada elemen butang.

Mari kita lihat operasi khusus melalui contoh contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    button{
        width:200px;
        height:100px;
        border-radius:20px;
        border:1px solid #000000;
        background-image:url(1118.02.png);
        }
    </style>
</head>
<body>
    <button></button>
</body>
</html>

Salin selepas log masuk

Hasil keluaran:

Bagaimana untuk menulis kod butang gambar css

(Belajar perkongsian video :

tutorial video css)

Atas ialah kandungan terperinci Bagaimana untuk menulis kod butang gambar css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!