Bagaimana untuk menetapkan imej img dalam css

Gaya CSS digunakan untuk mengawal pembentangan elemen halaman web, termasuk teks, imej, warna, reka letak, dsb. Apabila anda ingin menetapkan imej pada halaman web, anda perlu menggunakan CSS untuk mengawal saiz, kedudukan, sempadan, latar belakang dan atribut imej yang lain. Hari ini kami akan menerangkan cara menggunakan CSS untuk menetapkan imej img.

1. Tetapkan saiz imej

Untuk menetapkan saiz imej dalam CSS, anda boleh menggunakan atribut lebar dan ketinggian. Contohnya, untuk menetapkan lebar imej kepada 200 piksel dan ketinggian kepada 150 piksel, anda akan menulis:

img {
  width: 200px;
  height: 150px;
}

Ini akan menjadikan semua teg img bersaiz 200x150 piksel.

Jika hanya satu daripada sifat ini ditetapkan, imej akan mengekalkan penskalaan asalnya. Contohnya:

img {
  width: 200px;
}

Ini akan menjadikan lebar imej 200 piksel dan ketinggian akan diskalakan secara berkadar.

2. Tetapkan sempadan imej

Untuk menetapkan sempadan imej dalam CSS, anda boleh menggunakan atribut sempadan. Sebagai contoh, untuk menetapkan sempadan imej kepada merah dengan lebar 2 piksel, anda boleh menulis:

img {
  border: 2px solid red;
}

Ini akan menambah sempadan merah pada semua teg img dengan lebar 2 piksel kesan adalah seperti yang ditunjukkan di bawah Paparan:

3. Tetapkan sudut bulat imej

Untuk menetapkan sudut bulat imej dalam CSS, anda boleh menggunakan atribut jejari sempadan . Contohnya, untuk menetapkan empat penjuru imej kepada penjuru bulat dengan jejari 10 piksel, anda boleh menulis:

img {
  border-radius: 10px;
}

Ini akan menjadikan empat penjuru semua teg img dibundarkan.

Jika anda ingin membulatkan sudut tertentu sahaja, anda boleh menulis seperti ini:

img {
  border-top-left-radius: 10px;
}

Ini akan menjadikan sudut kiri atas dibulatkan dan mengekalkan sudut yang lain ke kanan.

4. Tetapkan latar belakang imej

Untuk menetapkan latar belakang imej dalam CSS, anda boleh menggunakan atribut latar belakang. Contohnya, untuk menukar latar belakang imej kepada kelabu, anda boleh menulis:

img {
  background: gray;
}

Ini akan menjadikan latar belakang semua teg img menjadi kelabu.

Jika anda hanya mahu menukar warna latar belakang bahagian tengah sempadan gambar, anda boleh menggunakan atribut warna latar belakang bersama-sama dengan atribut sempadan. Contohnya:

img {
  border: 2px solid red;
  background-color: gray;
}

Ini akan menukar warna latar belakang di tengah-tengah jidar gambar kepada kelabu.

5. Tetapkan kedudukan imej

Untuk menetapkan kedudukan imej dalam CSS, anda boleh menggunakan atribut margin dan padding. Contohnya, untuk menetapkan jidar imej kepada 20 piksel, anda akan menulis:

img {
  margin: 20px;
}

Ini akan menjadikan semua teg img 20 piksel daripada persekitarannya.

Jika anda ingin menukar jarak antara imej dan elemen sekeliling, anda boleh menggunakan atribut padding. Sebagai contoh, untuk menetapkan pelapik imej kepada 10 piksel, anda akan menulis:

img {
  padding: 10px;
}

Ini akan memastikan semua tag img berjarak 10 piksel daripada elemen sekeliling.

Ringkasnya, kami boleh mengawal imej dalam halaman web melalui gaya CSS, termasuk saiz, kedudukan, sempadan, latar belakang dan atribut lain. Menetapkan gaya imej boleh menjadikan halaman web lebih cantik dan lebih mudah dibaca oleh pembaca.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan imej img dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!