Olga Grabek

Olga Grabek Senior Software
Engineer

Temat: Zmiana opacity na png-24 -> IE7 i IE8

Jakie znacie sposby na ominięcie brzydkiego, czarnego tła pod IE7 i IE8 przy animacji elementu, którego tło zawiera png-24?

Kod wygląda mniej więcej tak:

html:

<a id="animate-btn">read me</a>


css:

#animate-btn {background: url(/images/sprites.png) no-repeat 0 -100px;}


i Javascript:

$('#animate-btn').animate({
opacity: 1;
}, 500)


Bardzo zależy mi na tym, by obrazek był w tle elementu, bo mam takich obrazków kilknaście, więc potrzebuje sprite-a, a nie osobnych obrazków, 'owiniętych' w div-ach. Tło mam niejednolite, więc nadanie tła dla png-a odpada.Olga Grabek edytował(a) ten post dnia 09.07.12 o godzinie 15:12

konto usunięte

Olga Grabek

Olga Grabek Senior Software
Engineer

Temat: Zmiana opacity na png-24 -> IE7 i IE8

Próbowałam tego, ale to rozwiązanie nie działa, jeżeli obrazek jest w background.

Chcę uniknąc rozwiązania:

<div id="jaZmieniamOpacity">
<img src="png-24.png"/>
</div>

bo będę musiała załadować z 20-25 takich obrazków.Olga Grabek edytował(a) ten post dnia 09.07.12 o godzinie 16:34
Olga Grabek

Olga Grabek Senior Software
Engineer

Temat: Zmiana opacity na png-24 -> IE7 i IE8

Dla potomności, bo może ktoś będzie się z tym zmagał. Znalazłam w sumie trzy sensowne rozwiązania tego problemu:

1. Jeżeli obrazki są tłem elementu i mają być sprite-em, to trzeba im nadać kolor tła

2. Jeżeli obrazki są tłem elementu, ale mogą być pocięte pojedynczo -> http://blog.leenix.co.uk/2010/10/black-borders-on-pngs-in-ie-when-fading.html

3. Jeżeli obrazek występuje inline-owo w HTML: patrz powyżej, link, który podał Piotr
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: Zmiana opacity na png-24 -> IE7 i IE8

Dzieki Olga, to rozwiazuje jeden z problemow z ktorymi sie borykam od jakiegos czasu.

Następna dyskusja:

zmiana koloru kursora klawi...




Wyślij zaproszenie do