CSS'de Resim Nasıl Karartılır

Bir resmin karartılması görmeyi zorlaştırır, ancak tam da aradığınız efekt bu olabilir. Loş bir 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 kumsalın resmini karartabilirsiniz. Bu karartma efektini oluşturmak için birden fazla görüntü oluşturmanız gerekmez. Basamaklı Stil Sayfaları veya CSS, birkaç satır kod kullanarak bu numarayı gerçekleştirebilir.

CSS

CSS, site tasarımcılarının nesnelerin web sayfalarında nasıl göründüğünü 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: düz;}

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

CSS Opaklığı

CSS kullanarak bir görüntünün opaklığını değiştirerek onu daha soluk hale getirirsiniz. Aşağıda gösterilen kod, yüzde 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 filter özniteliği, 0 ile 100 arasında bir opaklık ölçeği kullanır ve onun opaklık özelliği, 0 ile 1 arasında değişen değerlere sahip bir opaklık ölçeğine sahiptir. Her iki niteliğin de kullanılması, tüm tarayıcıların görüntünüzün opaklığını değiştirebilmesini sağlar. Karartmak 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ığı yüzde 100 olacak şekilde ayarlayabilirsiniz. Bu sınıf, görüntüyü opak hale getirir.

Programlı Olarak Karartma

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

Bir JavaScript işlevinin içinde görünen bu kod, görüntüye bir referans 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 herhangi bir zamanda onu çağırabilir.

Düşünceler

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