CSS3 kullanmıyorum. Bu yüzden opacity
veya filter
niteliklerini kullanamıyorum. Bu nitelikleri kullanmadan bir div
in background-color
özelliğini nasıl şeffaf hale getirebilirim? Bu link'deki metin kutusu örneği gibi olmalı. Burada metin kutusu arka plan rengi saydamdır. Aynısını yapmak istiyorum, ancak yukarıda belirtilen nitelikleri kullanmadan.
Opacity` ile ilgili sorun, genellikle bunun olmasını istemediğinizde içeriği de etkileyecek olmasıdır.
Eğer sadece öğenizin şeffaf olmasını istiyorsanız, bu gerçekten çok kolay:
background-color: transparent;
Ancak renkli olmasını istiyorsanız kullanabilirsiniz:
background-color: rgba(255, 0, 0, 0.4);
Veya doğru alpha
ile kaydedilmiş bir arka plan resmi (1px
x 1px
) tanımlayın.
(Bunu yapmak için Gimp
, Paint.Net
veya bunu yapmanıza izin veren başka bir görüntü yazılımı kullanın.
Sadece yeni bir resim oluşturun, arka planı silin ve içine yarı saydam bir renk koyun, ardından png olarak kaydedin).
René](https://stackoverflow.com/users/449444/rene-geuze) tarafından belirtildiği gibi, yapılacak en iyi şey, tarayıcı alfa desteklemiyorsa, önce rgba
ve yedek olarak 1px
x 1px
görüntü ile her ikisini karıştırmak olacaktır:
background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);
Ayrıca bakınız : http://www.w3schools.com/cssref/css_colors_legal.asp.
Demo : [My JSFiddle](
)Opaklık size yarı saydamlık veya şeffaflık verir. Bir örneğe bakın [Fiddle here][1].
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5; /* Good browsers */
Not: bunlar CSS3 özellikleri DEĞİLDİR
Bkz. http://css-tricks.com/snippets/css/cross-browser-opacity/
transparan, arka plan rengi için varsayılandır