Stilleri veya Javascript kullanarak görüntüyü parlaklaştırma

Question

Web sayfamdaki bir görüntüyü css veya javascript kullanarak fare ile aydınlatabilirim. Stillerde opaklık ve filtreler kullanarak bazı örnekler gördüm ama onlar benim için çalışmıyor gibi görünüyorlar. peşin

Teşekkür

CP

Answer 1

[GÜNCELLEME]

Saf CSS çözüm CSS filters kullanmak olacaktır:

İşte

img:hover { 
    filter: brightness(1.5); 
} 

hepimiz için% 50 parlaklık eklemek vurgulu görüntüler.

---

Neden değil? Ebeveyn kabının arka planını her zaman #fff (beyaz) olarak ayarlayabilir ve ardından görüntünün opaklığını azaltabilirsiniz.

HTML:

<div class="white"> 
    <img src="image.jpg" alt="Image" /> 
</div> 

CSS:

.white { background: #fff; } 
img:hover { 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
} 

diğer çözüm böyle Pixastic gibi bir JavaScript kütüphanesi kullanmaktır.

Answer 2

bir şey liek kullanırsınız:

filter: alpha(opacity=80); 
    opacity: 0.8; 

olarak bildiğim kadarıyla, bu CSS bunu başarmak için tek yoldur. Senin peşinde olan bu mu?

Answer 3

CSS spritelarını kullanabilirsiniz. Resmin 2 versiyonunu oluşturun: biri normal, biri parlak ve Photoshop kullanarak veya kullandığınız her şeyi kullanarak 1 görüntüye birleştirin.

CSS spriteları here'un iyi bir açıklaması var.

Elbette, bu sizin sitenizde kullanabileceğiniz bir şey olmayabilir. Örneğin, büyük resimlerde kullanmak isteyeceğiniz bir şey olmayabilir (boyut olarak iki katına çıkarlar). Parlaklaştırmak istediğiniz görüntüler dış kaynaklardan geliyorsa veya örneğin kullanıcılar tarafından yüklüyse bunu da yapamazsınız. Gezinme çubuğu görüntüleri ve diğer UI öğeleri gibi şeyler için iyi çalışır.