Bugün popüler web sitelerine bakın ve göreceğinizden emin olduğunuz bir tasarım uygulaması büyük, ekrana yayılan arka plan resimleridir. Bu görüntüleri eklemenin zorluklarından biri, web sitelerinin farklı ekran boyutlarına ve cihazlara yanıt vermesi gereken en iyi uygulamadan kaynaklanmaktadır. duyarlı web tasarımı.
Birçok Ekran için Tek Görüntü
Web sitenizin düzeni değişip farklı ekran boyutlarıyla ölçeklendiğinden, bu arka plan resimleri de boyutlarını buna göre ölçeklendirmelidir. Aslında, bu "akışkan görüntüler", duyarlı web sitelerinin (akışkan bir ızgara ve medya sorgularıyla birlikte) önemli parçalarından biridir. Bu üç parça, başlangıçtan beri duyarlı web tasarımının temelini oluşturmuştur, ancak duyarlı tasarım eklemek her zaman oldukça kolay olmuştur. bir siteye satır içi resimler (satır içi resimler, HTML işaretlemesinin bir parçası olarak kodlanmış grafiklerdir), aynı şeyi arka plan resimleriyle (ki CSS arka plan özellikleri kullanılarak sayfaya stillendirilir), uzun süredir birçok web tasarımcısı ve kullanıcı arabirimi için önemli bir zorluk sağlamıştır. geliştiriciler Neyse ki, CSS'ye "background-size" özelliğinin eklenmesi bunu mümkün kıldı.
Ayrı bir makalede, nasıl kullanılacağını ele aldık. CSS3 özelliği arka plan boyutu görüntüleri bir pencereye sığdırmak için genişletmek, ancak bu özellik için dağıtmanın daha da iyi, daha kullanışlı bir yolu var. Bunu yapmak için aşağıdaki özellik ve değer kombinasyonunu kullanacağız:
arka plan boyutu: kapak;
Cover keyword özelliği, tarayıcıya, pencerenin ne kadar büyüdüğüne veya küçüldüğüne bakılmaksızın, görüntüyü pencereye sığacak şekilde ölçeklendirmesini söyler. Görüntü tüm ekranı kaplayacak şekilde ölçeklenir, ancak orijinal oranlar ve en boy oranı bozulmadan tutularak görüntünün kendisinin bozulması önlenir. Görüntü, pencereye mümkün olduğunca geniş yerleştirilir, böylece tüm pencere yüzeyi kaplanır. Bu, sayfanızda boş noktalar veya görüntüde herhangi bir bozulma olmayacağı anlamına gelir, ancak aynı zamanda ekranın en-boy oranına ve içindeki görüntüye bağlı olarak görüntünün bir kısmının kesilebileceği anlamına gelir. soru. Örneğin, arka plan konumu özelliği için kullandığınız değerlere bağlı olarak bir görüntünün kenarları (üst, alt, sol veya sağ) görüntülerde kesilebilir. Arka planı "sol üst" olarak yönlendirirseniz, görüntüdeki herhangi bir fazlalık, alt ve sağ kenarlardan çıkacaktır. Arka plan görüntüsünü ortalarsanız, fazlalık tüm kenarlardan çıkacaktır, ancak bu fazlalık yayıldığından, herhangi bir taraftaki etki daha az hizmet edecektir.
'arka plan boyutu: kapak;' Nasıl Kullanılır
Arka plan resminizi oluştururken, oldukça büyük bir resim oluşturmak iyi bir fikirdir. Tarayıcılar, görsel kalite üzerinde gözle görülür bir etki olmaksızın bir görüntüyü küçültebilirken, bir tarayıcı bir görüntüyü büyüttüğünde görüntüyü orijinal boyutlarından daha büyük bir boyuta getirirseniz, görsel kalite düşer, bulanıklaşır ve pikselli. Bunun dezavantajı, tüm ekranlara dev görüntüler sunarken sayfanızın performans düşüşü yaşamasıdır. Bunu yaptığınızda, doğru şekilde yaptığınızdan emin olun. bu görüntüleri indirme hızı ve web dağıtımı için hazırlayın. Sonunda, yeterince büyük bir görüntü boyutu ve kalitesi ile indirme hızları için makul bir dosya boyutu arasındaki mutlu ortamı bulmanız gerekir.
Ölçekleme arka plan resimlerini kullanmanın yaygın yollarından biri, bu resmin bir sayfanın tüm arka planını kaplamasını istediğiniz zamandır. bu sayfanın geniş olup olmadığı ve bir masaüstü bilgisayarda görüntülenip görüntülenmediği veya çok daha küçük olup olmadığı ve elde taşınan, mobil bir bilgisayara gönderildiği cihazlar.
Resminizi web barındırıcınıza yükleyin ve arka plan resmi olarak CSS'nize ekleyin:
arka plan resmi: url (wdw.jpg üzerinde havai fişek);
arka plan tekrarı: tekrar yok;
arka plan konumu: merkez merkez;
arka plan eki: sabit;
Önce tarayıcı ön eki olan CSS'yi ekleyin:
-webkit-background-size: kapak;
-moz-back-size: kapak;
-o-arka plan boyutu: kapak;
Ardından CSS özelliğini ekleyin:
arka plan boyutu: kapak;
Değişen Cihazlara Uygun Farklı Görseller Kullanma
Bir masaüstü veya dizüstü bilgisayar deneyimi için duyarlı tasarım önemli olsa da, cihazların çeşitliliği Web'e erişebilen önemli ölçüde büyüdü ve daha çeşitli ekran boyutları ile birlikte geliyor bu.
Daha önce de belirtildiği gibi, örneğin bir akıllı telefona çok büyük ve duyarlı bir arka plan görüntüsü yüklemek, verimli veya bant genişliği konusunda bilinçli bir tasarım değildir.
Nasıl kullanabileceğinizi öğrenin medya sorguları görüntülenecekleri cihazlara uygun görseller sunmak ve web sitenizin mobil cihazlarla uyumluluğunu daha da geliştirmek.