5 Properties CSS Anda Perlu Tahu

Terdapat ciri CSS, seperti imej latar belakang, imej sempadan, pelekat, dan sifat kliping, dengan mana anda boleh tambah imej secara langsung ke halaman web dan mengawal kelakuan mereka. Walau bagaimanapun, terdapat juga sifat CSS yang berkaitan dengan imej yang sering disebut itu kerja pada imej yang ditambah dengan Tag HTML, yang cara pilihan untuk menambah imej ke laman web.

Keterangan kerja sifat-sifat berikut berbeza dari mengawal bayangan imej kepada menetapkan ketajaman, membantu kami mengawal penampilan dan kedudukan imej yang ditambah dengan tag. Mari lihat mereka satu demi satu.

1. Mengasah imej dengan imej-rendering

Apabila imej ditingkatkan, penyemak imbas melancarkan imej, jadi ia tidak kelihatan pixelated. Tetapi, bergantung pada resolusi imej dan skrin, ini mungkin bukan yang terbaik sepanjang masa. Anda boleh mengawal perilaku pelayar ini dengan imej-rendering harta.

Ini harta yang disokong dengan baik mengawal algoritma yang digunakan untuk skala imej. Dua nilai utama adalah pinggang tajam dan pixelated.

The pinggang tajam nilai mengekalkan kontras warna di antara piksel. Dalam erti kata lain, tiada penyempurnaan dilakukan pada imej, yang mana hebat untuk karya seni pixel.

Bila pixelated digunakan, piksel berdekatan piksel mungkin mengambil rupanya, menjadikannya kelihatan seperti bersama mereka membentuk satu piksel besar, hebat untuk skrin resolusi tinggi.

Sekiranya anda melihat dengan teliti pada tepi bunga di GIF di bawah, anda dapat melihat perbezaan antara biasa dan a pixelated gambar.

 img image-rendering: pixelated;  

2. Stretch images with sesuai objek

The mengandungi, penutup, mengisi nilai-nilai semua biasa, kami menggunakannya untuk saiz latar belakang harta yang mengawal bagaimana imej latar belakang memenuhi unsur yang dimiliki olehnya. The sesuai objek harta benda agak serupa dengannya, kerana ia juga menentukan bagaimana saiz imej di dalam bekasnya.

The mengandungi nilai mengandungi imej dalam bekasnya. penutup tidak sama, tetapi jika nisbah aspek imej dan bekas tidak sepadan, imej dipotong. mengisi menyebabkan imej menjadi meregangkan dan mengisi bekasnya. skala ke bawah memilih versi terkecil imej untuk mempamerkan.

 
  #container width: 300px; ketinggian: 300px;  img width: 100%; ketinggian: 100%; objek-fit: mengandungi;  

3. Shift imej dengan kedudukan objek

Begitu juga dengan pelengkap kedudukan latar belakang harta tanah saiz latar belakang, ada satu kedudukan objek harta untuk sesuai objek, juga.

The sesuai objek harta bergerak imej di dalam bekas imej kepada koordinat yang diberikan. Koordinat boleh didefinisikan sebagai unit panjang mutlak, unit panjang relatif, kata kunci (atas, ditinggalkan, pusat, bawah, dan betul), atau a gabungan yang sah mereka (top 20px kanan 5px, pusat kanan 80px).

 
  #container width: 300px; ketinggian: 300px;  img width: 100%; ketinggian: 100%; kedudukan objek: 150px 0;  

4. Imej kedudukan dengan menegak

Kami kadang-kadang menambah (yang selaras dengan sifatnya) di sebelah rentetan teks untuk menambah maklumat atau hiasan. Kalau macam itu, menyelaraskan teks dan imej ke kedudukan yang diinginkan boleh menjadi sedikit rumit-jika anda tidak tahu harta mana yang hendak digunakan.

The menegak harta adalah tidak eksklusif kepada sel-sel meja sahaja. Ia juga boleh menyelaraskan unsur sebaris di dalam kotak inline, dan dengan itu boleh digunakan untuk menyelaraskan imej dalam baris teks. Ia mengambil sejumlah nilai yang boleh digunakan untuk elemen sebaris, jadi anda mempunyai banyak pilihan untuk dipilih.

 
 PDF  
 

5. Imej bayangan dengan penapis: drop-shadow ()

Apabila digunakan secara tidak sengaja dalam teks dan kotak, bayang-bayang boleh menambah kehidupan ke laman web. Begitu juga dalam imej. Imej dengan bentuk teras dan latar belakang telus boleh mendapat manfaat daripada drop-shadow Penapis CSS.

Hujahannya adalah serupa dengan nilai sifat CSS berkaitan bayangan (bayang-bayang teks, kotak-bayang). Dua yang pertama mewakili jarak menegak dan mendatar antara bayang-bayang dan gambar, yang ketiga dan keempat adalah kabur dan juga merebak jejari bayang-bayang, dan yang terakhir ialah warna bayangan.

Seperti bayang-bayang teks, drop-shadow juga mewujudkan bayangan yang sama dibentuk ke objek yang dimiliki. Oleh itu, apabila ia digunakan pada imej, bayangan mengambil bentuk bahagian imej yang kelihatan.

 img filter: drop-shadow (0 0 5px blue);  

Baca Juga: Refleksi Imej CSS3 [Tips CSS3]