Tetapan css imej

Tetapan CSS Imej

CSS ialah salah satu komponen terpenting dalam reka bentuk web. Ia adalah bahasa helaian gaya yang digunakan untuk menentukan penampilan dan pemformatan halaman web. Antaranya, tetapan CSS imej adalah bahagian penting dalam reka bentuk web.

CSS mempunyai ciri yang menarik, iaitu, ia boleh bertindak secara langsung pada elemen dalam dokumen HTML, termasuk imej. Melalui tetapan CSS, kita boleh menukar pelbagai atribut seperti saiz, kedudukan, dan ketelusan imej untuk menjadikan halaman web lebih cantik, praktikal dan mudah dibaca.

Artikel ini akan memfokuskan pada beberapa sifat yang biasa digunakan dalam tetapan CSS imej: ketinggian, lebar, kedudukan, latar belakang, ketelusan dan jidar serta menyediakan kod sampel dan pemaparan.

1. Tinggi dan lebar

Dalam CSS, anda boleh menggunakan atribut ketinggian dan lebar untuk menetapkan ketinggian dan lebar imej. Kedua-dua sifat ini boleh ditentukan dalam piksel (px), peratusan (%) atau unit lain.

Sebagai contoh, jika kita ingin menetapkan lebar imej kepada 100 piksel dan ketinggian untuk menyesuaikan diri secara automatik, kita boleh menulis seperti ini:

img {
  width: 100px;
  height: auto;
}

Dalam kod di atas, atribut ketinggian ditetapkan kepada "auto" bermakna ketinggian akan disesuaikan mengikut perkadaran asal imej.

Jika kita ingin menetapkan lebar imej kepada 50% daripada lebar halaman web dan ketinggian untuk disesuaikan mengikut perkadaran asal, kita boleh menulis seperti ini:

img {
  width: 50%;
  height: auto;
}

2. Kedudukan

Melalui atribut kedudukan dalam CSS, kita boleh menetapkan kedudukan imej. Kedudukan mempunyai tiga nilai atribut yang biasa digunakan: statik, relatif dan mutlak.

• statik: Nilai atribut lalai, gambar dipaparkan dalam susunan biasa dokumen HTML.
• relatif: Kedudukan relatif, imej dialihkan berbanding kedudukan asalnya.
• Mutlak: Kedudukan mutlak, imej bergerak relatif kepada bekas yang mengandunginya.

Sebagai contoh, jika kita ingin mengalihkan imej 30 piksel ke kanan berbanding kedudukan asalnya, kita boleh menulis seperti ini:

img {
  position: relative;
  left: 30px;
}

Dalam kod di atas, kedudukan ialah digunakan atribut :relative dan left:30px. Atribut kiri menunjukkan memindahkan bilangan piksel yang ditentukan ke kiri atau kanan.

Jika kita ingin meletakkan imej di sudut kanan atas halaman web, kita boleh menulis seperti ini:

img {
  position: absolute;
  top: 0;
  right: 0;
}

Dalam kod di atas, kedudukan:mutlak, atas:0 dan right:0 atribut digunakan . Sifat atas dan kanan mewakili jarak relatif terhadap bahagian atas dan kanan bekas set masing-masing.

3. Latar Belakang

Melalui sifat latar belakang dalam CSS, kita boleh menetapkan imej sebagai latar belakang. Atribut latar belakang mempunyai pelbagai nilai atribut, termasuk warna, imej, kaedah pengulangan dan kedudukan.

Sebagai contoh, jika kita ingin menggunakan gambar sebagai latar belakang, kita boleh menulis seperti ini:

body {
  background-image: url("example.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

Dalam kod di atas, kita menggunakan gambar sebagai latar belakang elemen badan dan tetapkan atribut latar belakang- ulang, kedudukan latar belakang dan saiz latar belakang. Ulangan latar ditetapkan kepada tiada ulangan, yang bermaksud ia tidak akan muncul semula, kedudukan latar belakang ditetapkan ke tengah tengah, yang bermaksud imej dipusatkan sebagai saiz latar belakang ditetapkan kepada penutup, yang bermaksud imej latar belakang; dijamin meliputi sepenuhnya kawasan latar belakang.

4. Ketelusan

Melalui sifat kelegapan dalam CSS, kami boleh melaraskan ketelusan imej. Nilai atribut kelegapan ialah nombor antara 0 dan 1, di mana 0 bermaksud telus sepenuhnya dan 1 bermaksud legap sepenuhnya.

Sebagai contoh, jika kita ingin menetapkan ketelusan imej kepada separa lutsinar, kita boleh menulis:

img {
  opacity: 0.5;
}

5. Sempadan

Lulus Dengan atribut sempadan dalam CSS, kita boleh menambah sempadan pada imej. Sifat sempadan termasuk lebar, gaya dan warna garis sempadan.

Sebagai contoh, jika kita ingin menambah sempadan pepejal 1 piksel pada imej, kita boleh menulis:

img {
  border: 1px solid #000;
}

Dalam kod di atas, kita menggunakan atribut sempadan dan menetapkan Set lebar kepada 1 piksel, gaya kepada pepejal dan warna kepada hitam.

Berikut ialah kod sampel lengkap, menunjukkan penggunaan enam atribut ketinggian, lebar, kedudukan, latar belakang, ketelusan dan sempadan:

img {
  height: 200px;
  width: 200px;
  position: relative;
  left: 30px;
  background-image: url("example.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.5;
  border: 1px solid #000;
}

Ringkasan

Melalui CSS Tetapan boleh menambah lebih banyak gaya dan kesan pada gambar, menjadikan halaman web lebih kaya dan lebih jelas. Artikel ini memperkenalkan enam sifat yang biasa digunakan: ketinggian, lebar, kedudukan, latar belakang, ketelusan dan jidar, termasuk contoh kod dan pemaparan. Secara praktiknya, ia perlu diaplikasikan secara menyeluruh mengikut keperluan reka bentuk web khusus untuk mencipta laman web yang lebih tersendiri.

Atas ialah kandungan terperinci Tetapan css imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!