Arka plan resmim yüklenirken renk gradyanı yüklemeye çalışıyorum ancak görüntü yüklense bile görüntüleniyor. CSS'mi nasıl yazabilirim, böylece görüntü yüklendiğinde renk gradyanı görüntülenmeyecek? i denedim örnek kod bakınız: Başka bir html kodları ekleme sakıncası yoksaArka plan görüntüsü yavaş internet bağlantısı nedeniyle yüklenirken renk geçişi nasıl yüklenir?
background: url("../images/contactBg.jpg"), linear-gradient(rgba(3, 34, 47, 0.8), #01010e);
, arka plan gradyan ile bir div içindeki arka plan görüntüsü ile div sarabilirsiniz.
Resim yüklemesi PNG'dir, bu nedenle görüntü renk gradyanı yüklenmeden sonra görünür olmamalı ve önerme şekliniz de gradyanı görüntünün arkasında olduğu gibi koruyacaktır –
@AkashJain Gördüğünüz gibi, bunu yalnızca CSS ile yapamazsınız. Belki de görüntüyü yüklemek için jquery '.load() 'ı kullanmayı deneyin, ardından istek tamamlandığında div sınıfını değiştirin. –
Bunu yalnızca herhangi bir şekilde CSS'de düşünmüyorum (veya en azından bilmiyorum).
bir çözüm JQuery load function (test) kullanmaktır:
$('#mydiv').load('../images/contactBg.jpg', function() {
//image has loaded, remove the background and add the image
$('#mydiv').css("background", "none");
$('#mydiv').css('background-image', 'url(../images/contactBg.jpg)');
});
Bu şekilde, background: linear-gradient(rgba(3, 34, 47, 0.8) için #mydiv arasında CSS ayarlanmış ve görüntü yüklenecektir zaman, bu gradyanı kaldırmak ve değiştirecektir görüntü ile.
çalışmadı! –
@Mazino S Ukah - İşe yaramıyor, lütfen çalışma kemanına bakın: https://jsfiddle.net/k77dsyc2/1/ FYI, kodu test etmediğimi belirtmek, sorunun çözülmesi için bir kılavuz olduğu anlamına geliyor, tam olarak değil çözüm. –
tamam havalı, teşekkürler –
Görünüşe göre yaklaşımınız sadece tarayıcılarda (IE9 +) çalışmalıdır? – tsh