Witam!
Postanowiłem się nieco "pobawić" w przezroczyste napisy na zdjęciach:


częśćjest "zapożyczona" z interii. Celem jest, by zdjęcie miało efekt taki, jaki jest właśnie na interii na stronie głównej ("Warto zobaczyć")
Czy mógłby mnie ktoś naprowadzić co mam źle, że IE tego nie widzi, a na FF i Operze jest niemal ok?

Próbowałem czegoś takiego:


ale to nic nie dało...
Pomóżcie proszę...

Sam używam tego drugiego sposobu.



Działa jak natura chciała, więc pewnie masz błąd w innej części skryptu.

Możesz zobaczyc tutaj: http://tommy4.gtacartel.com

Podejrzewam, że musisz po prostu dodać w css:

opacity: <x>;-moz-opacity: <x>; -khtml-opacity: <x>; filter: alpha(opacity="<x>");

BO Z TEGO CO WIDZĘ U CIEBIE WIDNIEJE TYLKO "FILTER: Alpha(Opacity=90);" (działa tylko w IE) i to w dodatku bez średnika na początku oddzielającego background od filtra.

AHA, no i ten kod wyżej to oczywiście funkcja, musisz ją wywołać poprzez setOpacity("id_obiektu", 100), gdzie 100 jest dowolną liczbą z zakresu od 0 do 100. Taka funkcja przydaje się szczególnie przy dynamiczniej zmianie przeźroczystośći obiektu, np. po najechaniu myszą. Ale skoro ty chcesz dodać tylko do CSS to tak jak wyżej.

fakt ale akurat o tym nie wiedziałem .... (czyt. nie doczytałem tego na innych stronach )

No.... teraz jest tak, że na wszystkim oprócz IE śmiga wyśmienicie

Ale niestety pod IE-zgrozą WOGÓLE nie widać przezroczystości ;(

Czy byłbyś tak dobry i pokazał przykład w jaki sposób w tabeli to wszystko poukładać? Próbowałem na sposób interii.... ale tam są tak namieszane te style, że historia

Spróbuję, choć nic nie obiecuję, bo zaraz idę film oglądać.

no ja mam po prostu klase w css ustawiona:

#costam
{
opacity: 0.9;
-moz-opacity: 0.9;
-khtml-opacity: 0.9;
filter: alpha(opacity = 90);
}

Potem tylko <div id="costam">Tekst</div>

Nie wiem dokładnie o co ci chodzi z tą interią, bo ja tam nie widzę żadnych przeźroczystych tekstów.

Przykład w tabeli hmm.

no możesz zrobić coś w tym stylu:

<div style="width: 200px; height: 100px; text-align: center; vertical-align: bottom; background: url('jakisobrazek.gif'); border: 1px #ff0000 solid;"><div id="costam" style="width: 200px; height: 20px; color: #ffffff; background-color: #000000;"><span>Jakiś tekst</span></div></div>

Jeśli się nie mylę powinno to wyświetlić prostokąt o wymiarach 200px na 100px z wycentrowaną treścią znajdującą się u dołu prostokątu z obrazkiem tła jakisobrazek.gif, ramką czerwoną 1px. Następnie w tym prostokącie jest drugi prostokąt o przeźroczystości 0.9 (czarny o wysokości 20px z białym tekstem) i w nim Jakiś tekst (dosłownie).

Czarny prostokąt powinien prześwitać na obrazek tła.

W css-ie nie siedzę prawie w ogóle - proszę o wyrozumiałość (w domyśle: za takie "głupie" pytania). Zrobiłem tak jak poleciłeś. Prawie jest ok. Prawie (robie wielką różnicę ) bo pod innymi niż IE to wszystko ładnie śmiga, lecz z tego co widzę internautów, którzy używają IE jest prawie 70%, a nie chcę zrobić strony "tylko pod coś tam oby to nie był IE)...
Więc prawie wszystko, bo pod IE nie ma efektu przezroczystości.


Na ich stronie głównej jest to największe zdjęcie (jako pierwszy news). Zakładka "Warto zobaczyć". Nie piszę dokładnie, ponieważ co jakiś czas to się zmienia (teraz - gdy to piszę - są to superjedynki)

BTW:

Twoja stronka jest w budowie....

//EDIT
Poradziłem sobie jakoś... jest już tak jak chciałem. Szybko się uczę
Jednego jeszcze nie wiem: gdzie zmienić aby "Jakiś text" (i to dosłownie ) był na dole, a nie u góry?

Tak samo jak masz w zewnętrznym divie: "vertical-align: bottom;", to samo dodajesz do wewnętrznego diva.

Niestey Nie działa.....
Dalej tekst mam u góry zdjęcia

u góry zdjęcia, czy u góry czarnego tła?

[HTML] pobierz, plaintext 
<div style="width: 200px; height: 100px; text-align: center; vertical-align: bottom; background: url('jakisobrazek.gif'); border: 1px #ff0000 solid;">
<div id="costam" style="width: 200px; height: 20px; color: #ffffff; background-color: #000000; vertical-align: bottom;"><span>Jakiś tekst</span>
</div>
</div>
[HTML] pobierz, plaintext 

Jeśli to nie działa to spróbuj:

[HTML] pobierz, plaintext 
<div style="width: 200px; height: 100px; text-align: center; vertical-align: bottom; background: url('jakisobrazek.gif'); border: 1px #ff0000 solid;">
<div id="costam" style="width: 200px; height: 20px; color: #ffffff; background-color: #000000; margin-top: 9px;"><span>Jakiś tekst</span>
</div>
</div>
[HTML] pobierz, plaintext 

Czyli dodajesz po prostu miejsce u gory (dalem 9px, ale mozesz go dowolnie zmieniac).

Kolejny dzien mija... i dalej top samo
Zrobiłem w końcu tak:

[HTML] pobierz, plaintext 
<div style="width: 170px; height: 130px; text-align: center;  vertical-align: bottom; background: url('OBRAZKI/!testowy.jpg'); border: 1px #ff0000 solid;">
<div id="costam" style="width: 170px; height: 20px; color: #ffffff;  vertical-align: bottom; background: url(OBRAZKI/tlo_gray.png); ">
<font face=verdana size=1 color=lightgrey><span><B>Jakiś tekst</B></span></font>
[HTML] pobierz, plaintext 

efekt jest taki jak na załączonym obrazku:


tlo napisu (tlo_gray.png) wraz z napisem "Jakiś tekst" powinno być u dołu zdjęcia

No to skoro vertical-align: bottom nie działa, to daj marginesy u góry.