CSS’deki bir Resmin Ölçümü

Bir resmi karartmak görmeyi zorlaştırır, ancak bu tam olarak aradığınız etki olabilir. Soluk görüntü bir web sayfasında daha az belirgin hale gelir ve onu çevreleyen nesnelerden daha az dikkat çeker. Örneğin, bir kullanıcının odağını görüntünün altındaki bir menüye çekmek için güneşli bir plajın resmini karartabilirsiniz. Bu karartma efektini oluşturmak için birden fazla görüntü oluşturmanız gerekmez. Basamaklı Stil Sayfaları veya CSS bu numarayı birkaç kod satırı kullanarak gerçekleştirebilir.

CSS

CSS, site tasarımcılarının nesnelerin web sayfalarında nasıl görüneceğini tanımlamak için kullandıkları bir dildir. Renk ve opaklık gibi bu nitelikler, aşağıdaki örnekte gösterildiği gibi değerlere sahiptir: .redBorder {border-color: red; border-style: solid;}

Bu kod redBorder adlı bir CSS sınıfı oluşturur. HTML img etiketlerinden biri bu sınıfa başvuruyorsa, site ziyaretçileri web sayfanızda görüntülerken görüntünün etrafında düz kırmızı bir kenarlık görürler. Bu sınıfa başvuran HTML kodu aşağıdaki gibi görünür ve bu img etiketindeki sınıf referansı kaldırılarak kırmızı kenarlık kaldırılabilir:

CSS Opaklığı

Bir görüntünün CSS kullanarak opaklığını değiştirerek, onu daha kısık hale getirirsiniz. Aşağıda gösterilen kod, % 40'lık opaklık değerlerini tanımlayan opacity40 adlı bir sınıf oluşturur: .opacity40 {filter: alpha (opacity = 40);

opaklık: 0.4; }

Sınıfın filtre özelliği, 0 ile 100 arasında bir opaklık ölçeği kullanır ve opaklık özelliği, 0 ila 1 arasında değişen değerlerde bir opaklık ölçeğine sahiptir. Her iki özelliği de kullanmak, tüm tarayıcıların görüntünün opaklığını değiştirebilmesini sağlar. Soluklaştırmak için bu sınıf referansını bir görüntüye ekleyin. Ayrıca "opacity100" adında bir sınıf oluşturabilir ve değerlerini görüntünün opaklığının yüzde 100 olmasını sağlayacak şekilde ayarlayabilirsiniz. Bu sınıf görüntüyü opak yapar.

Programlı Olarak Karartma

Kullanıcılar sayfayı açtığında web sayfanız soluk bir resim görüntüleyebilir veya kodunuz resmin yüklenmesinden sonra resmin kararmasına neden olabilir. Görüntüyü başlangıçta soluk yapmak için, opaklığını daha önce açıklandığı gibi daha düşük bir değere ayarlayın. Uygulamanız çalışırken görüntüyü karartmak için, görüntünün opaklığını aşağıdaki örnekte gösterildiği gibi tanımlayan sınıfın adını değiştirin: var imageObject = document.getElementById ("image1"); imageObject.className = "opacity40";

Bir JavaScript işlevi içinde görünen bu kod, görüntünün referansını alır ve sınıf adını "opacity40" olarak değiştirir. Kullanıcılar, JavaScript işlevini çalıştıran bir düğmeyi tıklayabilir veya kodunuz istediğiniz zaman çağırabilir.

hususlar

Opaklığını dinamik olarak değiştirmek istiyorsanız, JavaScript işlevinin, soluklaştırmak istediğiniz resmin kimlik değerine ihtiyacı vardır. Daha önce açıklanan örnekteki resim kimliği "resim1" dir. Soluklaştırılacak birden fazla resminiz varsa, onlara benzersiz id değerleri verin ve bunları opaklık değişikliğini yapan işleve aktarın. Farklı opaklık derecelerini tanımlayan istediğiniz kadar CSS sınıfı oluşturun. Daha sonra JavaScript işlevindeki sınıf referansını değiştirerek bir görüntüyü herhangi bir dereceye kadar kısabilirsiniz.