Arka plan görüntüleri, kenarlık görüntüleri, maskeleme ve kırpma özellikleri gibi CSS özellikleri vardır. doğrudan görüntü ekle web sayfalarına ve davranışlarını kontrol etmek. Ancak, görüntü ile ilgili CSS özellikleri daha az sıkça belirtilen ile eklenen resimler üzerinde çalışmak HTML etiketi, web sayfalarına resim eklemenin tercih edilen yolu.
Bu ikinci özelliklerin iş tanımı görüntü gölgesini denetleme için netliği ayarlama, ile eklenen görüntülerin görünümünü ve konumunu daha iyi kontrol etmemize yardımcı olun etiket. Onları birer birer görelim.
1. Görüntüleri netleştirin görüntü işleme
Bir görüntü yükseltildiğinde, tarayıcı görüntüyü pürüzsüzleştirir, bu yüzden pikselli görünmüyor. Ancak, görüntünün ve ekranın çözünürlüğüne bağlı olarak, bu her zaman en iyisi olmayabilir. Bu tarayıcı davranışını kontrol etmek için görüntü işleme özellik.
Bu iyi desteklenen özellik görüntüyü ölçeklemek için kullanılan algoritmayı kontrol eder. İki ana değeri çıtır kenarları ve pikselli.
çıtır kenarları değer pikseller arasındaki renk kontrastını korur. Başka bir deyişle, görüntülerde hiçbir düzeltme işlemi yapılmaz. piksel sanat için harika.
Ne zaman pikselli kullanılırsa, bir pikselin yakındaki pikselleri görünüşünü almak, birlikte gibi görünmelerini sağlamak büyük bir piksel oluşturmak, yüksek çözünürlüklü ekranlar için harika.
Aşağıdaki GIF'teki çiçek kenarlarına yakından bakmaya devam ederseniz, normal pikselli görüntü.
img image-rendering: pixelated;
2. ile görüntüleri streç nesneye uygun
içermek, kapak, doldurmak değerlerin hepsi tanıdık, biz bunları Arka plan boyutlu bir arka plan görüntüsünün ait olduğu öğeyi nasıl doldurduğunu kontrol eden özellik. nesneye uygun özellik, belirlediği gibi, ona oldukça benzer. bir görüntü kabının içinde nasıl boyutlandırılır.
içermek değer görüntüyü kabının içinde içerir. kapak aynısını yapar, ancak görüntünün ve kabın en boy oranı aynı değilse görüntü kırpılmış. doldurmak görüntünün kabını gerin ve doldurun. azaltmakResmin en küçük sürümünü seçer göstermek.
Tamamlayıcı benzer Arka plan konumlu mülkiyet Arka plan boyutlu, bir var Nesne-konumu mülk nesneye uygun, çok.
nesneye uygun özellik görüntüyü taşır bir görüntü kabının içinde verilen koordinatlara. Koordinatlar olarak tanımlanabilir mutlak uzunluk birimleri, göreceli uzunluk birimleri, anahtar kelimeler (üst, ayrıldı, merkez, alt, ve sağ) veya bir geçerli bir kombinasyonu (üst 20px sağ 5px, merkez sağ 80 piksel).
Bazen ekleriz (bunlar doğada satır içi olan) metin dizelerinin yanında Daha fazla bilgi veya dekorasyon için. Bu durumda, metni ve resmi hizalamak istediğiniz özelliği kullanmak biraz zor olabilir - hangi özelliği kullanacağınızı bilmiyorsanız.
dikey hizalama özellik yalnız masa hücrelerine özel değil. Aynı zamanda bir satır içi öğeyi bir satır içi kutunun içine hizalayabilir ve bu nedenle görüntüyü bir metin satırında hizalamak. Satır içi bir öğeye uygulanabilecek makul sayıda değer alır, bu nedenle aralarından seçim yapabileceğiniz birçok seçeneğiniz vardır..
PDF
5. Gölge görüntüleri ile filtre: drop-shadow ()
Belirgin olmayan metinlerde ve kutularda kullanıldığında, gölgeler bir web sayfasına hayat ekleyebilir. Aynı görüntüler için de geçerlidir. Çekirdek şekilli ve saydam arkaplanlı görüntüler yararlanabilir Düşen gölge CSS filtresi.
Argümanları gölge ile ilgili CSS özelliklerinin değerlerine benzer (Metin gölgesi, kutu gölge). İlk ikisi dikey ve yatay mesafe gölgeler ve görüntü arasında, üçüncü ve dördüncü bulanıklık ve gölge yarıçapı yaymak, ve sonuncusu gölge rengi.
Sadece gibi Metin gölgesi, Düşen gölge ayrıca bir gölge oluşturur ait nesneye kalıplanmış. Böylece, bir görüntüye uygulandığında, gölge görüntünün görünür kısmının şeklini alır..
#container width: 300px; yükseklik: 300px; img genişlik:% 100; yükseklik:% 100; object-fit: içerir;
#container width: 300px; yükseklik: 300px; img genişlik:% 100; yükseklik:% 100; object-fit: içerir; 
