Bagaimana untuk menetapkan dan menukar gaya imej dengan css

CSS (Cascading Style Sheets) ialah bahasa reka bentuk web yang digunakan untuk menambah gaya dan reka letak pada halaman web. CSS menyediakan pelbagai ciri, termasuk keupayaan untuk menambah gaya pada imej. Dalam artikel ini, kita akan belajar cara menggayakan dan menukar imej menggunakan CSS.

Langkah Pertama: Pilih Imej

Sebelum menggunakan CSS untuk menambah gaya pada imej, kita perlu terlebih dahulu membuat pilihan pada imej yang perlu kita gunakan padanya. Kita boleh menggunakan elemen HTML yang berbeza untuk memaparkan imej, yang paling biasa ialah img. Kita boleh menggunakan kod berikut dalam dokumen HTML untuk memaparkan imej:

<img src=&#39;example.jpg&#39;>

di mana atribut src mewakili URL fail yang ingin kami gunakan sebagai sumber imej. Kita boleh menentukan sumber imej menggunakan laluan relatif atau mutlak. Sebagai contoh, jika kami ingin memaparkan fail example.jpg di akar tapak web kami, kami boleh menggunakan kod berikut:

<img src=&#39;/example.jpg&#39;>

Sekarang kita telah memilih imej yang ingin kita gayakan, inilah caranya untuk menambah gaya pada langkah imej.

Langkah 2: Tetapkan saiz imej

Untuk melaraskan saiz imej, kita boleh menggunakan sifat lebar dan ketinggian CSS. Sebagai contoh, jika kita ingin menetapkan lebar imej kepada 200 piksel dan ketinggian kepada 150 piksel, kita boleh menggunakan kod berikut:

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

di mana img ialah pemilih elemen yang kita mahu menerapkan gaya untuk. Atribut lebar dan tinggi mewakili lebar dan tinggi imej yang ingin kita tetapkan. Dalam kes ini, lebar ditetapkan kepada 200 piksel dan ketinggian kepada 150 piksel.

Langkah 3: Ubah suai warna imej

Kita boleh menggunakan atribut penapis CSS untuk mengubah suai warna imej. Nilai atribut penapis ialah senarai tertib fungsi CSS, di mana setiap fungsi mewakili jenis penapis dan parameter yang akan digunakan. Berikut ialah beberapa jenis penapis yang biasa digunakan:

-skala kelabu Menukar imej kepada skala kelabu.
-sepia menukar imej kepada ton sepia.
-terbalikkan menyongsangkan warna imej.
-tepu meningkatkan ketepuan imej.
-kecerahanLaraskan kecerahan imej.
-contrastLaraskan kontras imej.

Sebagai contoh, jika kita ingin menukar imej kepada skala kelabu, kita boleh menggunakan kod berikut:

img {
   filter: grayscale(100%);
}

Di mana, fungsi skala kelabu(100%) bermaksud menukar imej sepenuhnya kepada skala kelabu Perbelanjaan. Kita boleh menggunakan nilai antara 0% dan 100% untuk menentukan sejauh mana kesan yang akan digunakan.

Langkah 4: Gunakan sempadan

Kita boleh menggunakan sifat sempadan CSS untuk menambah sempadan pada imej. Harta sempadan merangkumi tiga sub-sifat: lebar sempadan, gaya sempadan dan warna sempadan. Sifat lebar sempadan menetapkan lebar sempadan, sifat gaya sempadan menetapkan gaya sempadan dan sifat warna sempadan menetapkan warna sempadan.

Sebagai contoh, jika kita ingin menetapkan sempadan imej kita kepada garis merah pepejal dengan lebar sempadan 2 piksel, kita boleh menggunakan kod berikut:

img {
   border-width: 2px;
   border-style: solid;
   border-color: red;
}

di mana, sempadan atribut -width Tetapkan lebar sempadan, atribut gaya sempadan menetapkan gaya sempadan, "pejal" bermaksud sempadan pepejal, dan atribut warna sempadan menetapkan warna sempadan Di sini kita memilih merah.

Langkah 5: Putar imej

Kita boleh menggunakan sifat transformasi CSS untuk memutar imej. Atribut transform termasuk satu siri fungsi, termasuk rotate(), scale(), dan translate(). Fungsi rotate() boleh digunakan untuk memutar elemen.

Sebagai contoh, jika kita ingin memutar imej kita 45 darjah, kita boleh menggunakan kod berikut:

img {
   transform: rotate(45deg);
}

Di mana, fungsi rotate(45deg) bermaksud memutar imej 45 darjah . Kita boleh menggunakan nilai negatif untuk memutarkan imej mengikut arah lawan jam.

Petua ini hanyalah sebahagian daripada penggayaan imej CSS. Bergantung pada keperluan anda, anda boleh menggabungkan berbilang sifat CSS untuk mencapai kesan akhir yang diingini. Memandangkan reka bentuk keseluruhan dan rasa tapak web anda, anda harus konsisten dalam gaya imej anda.

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