Görüntüyü bir degrade gibi saydamlaştırır.

Arkadaki içeriğin görülebilmesi için (saydamlık sayesinde) görüntüyü (arka plan görüntüsü) saydamlaştırmak istiyorum.Görüntüyü bir degrade gibi saydamlaştırır.

Açıkça bir PNG görüntüsüyle bunu başarabilirim, ancak grafik tasarımcıma sormak istediğimde her zaman değiştirmek istediğim resmi değiştirmek istiyorum => saydamlık noktalarını durdur (belki daha fazla renk istiyorum veya belki istiyorum daha az renk ve daha fazla şeffaflık).

CSS3 ile aynı etkiyi elde etme şansım var mı? Bir jpg (ve bir png) üzerinde şeffaf bir degrade uygulamayı denedim ama PNG zaten zaten şeffaflık (ve temelde degrade) zaten (bu css degrade işe yaramaz yapar) zaten var sürece göremiyorum.

Herhangi bir öneriniz var mı? Web üzerinden zor kazıyorum ama doğru anahtar kelimeyi kullanmıyorum gibi görünüyor ya da belki mümkün değil.

Güncelleme 1:

Kod kelimelerin çok fazla diyor, ben böyle bir şey yapmak istiyorum (ama sözdizimi besbelli yanlıştır): ait

background: linear-gradient(to bottom, rgba(url('splash_bottom3.png'), 0.0), rgba(url('splash_bottom3.png'), 1.0));

kaynak

2013-10-31 Fire-Dragon-DoL

"Maskeleme" araması yapmalısınız. Yine de tarayıcılar arası çalışmayı zorlaştırıyor. – vals

Ohhh, öneriniz gerçekten çok iyi, göründüğü gibi doğru anahtar kelimeyi aramıyordum. Tamam web etrafında biraz kontrol ediyorum, sadece IE10 +/krom son sürümü/firefox son sürümü destekleyen ile tamam. Bununla bir sorunum varsa, açıkçası onu kullanamıyorum. –

Komple yeniden yazmak benim Önceki cevap, çünkü görünüşte ve tamamen yanlış anlaşıldım.

Bunu isterseniz:

enter image description here

Bunu yapabilirsin:

<html> 
 
    <style type='text/css'> 
 
    div, img { position:absolute; top:0; left:0; width:250px; height:250px; } 
 
    img { 
 
     -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))) 
 
    } 
 
    </style> 
 
    <body> 
 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet porttitor massa. Morbi eget tortor congue, aliquet odio a, viverra metus. Ut cursus enim eu felis sollicitudin, vitae eleifend urna lobortis. Mauris elementum erat non facilisis cursus. Fusce sit amet lacus dictum, porta libero sed, euismod tellus. Aenean erat augue, sodales sed gravida ac, imperdiet ac augue. Ut condimentum dictum mauris. Donec tincidunt enim a massa molestie, vel volutpat massa dictum. Donec semper odio vitae adipiscing lacinia.</div> 
 
    <img src='http://verysmartbrothas.com/images/random.jpg?9fe95b' /> 
 
    </body> 
 
</html>

Güncelle 1

Bunu diğer tarayıcılarda yapmak istiyorsanız, o kadar kolay olmayacak. Firefox’un bir SVG’ye ihtiyacı var ve IE’nin bir takım iş çevrelerine ihtiyacı var.

görüntü konteyner div

http://jsfiddle.net/yw9v7zm5/

.css kullanır:

kaynak

2013-10-31 18:51:07 bishop

Evet, ancak bu şekilde, görüntü şeffaf olmaz, yanılıyor muyum? Yani eğer #under div'umda bir metin varsa, görüntü aracılığıyla göremiyorum. Daha önce buna benzer bir şey test ediyordum. –

Doğru, görüntü saydam olmayacak. #under 'in arkasında metin varsa, (doğal yığınlama sırasını varsayarak) karşılanacaktır. Bunu z-endeksi ile alabilirsiniz. Cevabımda bir güncelleme gönderiyorum. – bishop

Sorun şu ki, resmin ardında kaybolmak için metne ihtiyacım var, bu benim asıl amacım. –

sadece (bu durumda beyaz,) arka plan rengine solmaya istiyorsanız burada çalışan örneğe bakın

background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,1))); 
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%); 
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%); 
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%); 
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0);

kaynak

2015-04-06 04:00:24

Bu çözüm BrowserStack kullanarak test edebileceğim tüm IE/FF/Chrome/Safari üzerinde çalışıyor! – ZedTuX

Görüntüyü bir degrade gibi saydamlaştırır.

cevap

İlgili konular