Forum PHP.pl > Tekst na obrazku

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Tekst na obrazku

Forum PHP.pl > Forum > Po stronie przeglądarki

Piciek

29.03.2009, 10:35:43

Chcialbym uzyskac taki efekt..

jinchuriki

29.03.2009, 10:38:30

Kod

<div style="background-image: url(link do obrazka); width: szerokość; height: wysokość;">Jakiś tekst</div>

wookieb

29.03.2009, 10:40:45

A jakieś próby podejmowałeś czy liczysz na to, że usiądziemy z tobą i poprowadzimy za rączke?
Pokaż co próbowałeś. Dowiedz się o position: relative, top i left. A takze opacity (dla ie wpisz w google "ie opacity")

Piciek

29.03.2009, 10:42:23

a zeby tekst byl na pasku a ten pasek przeźroczysty..?

jinchuriki

29.03.2009, 10:45:20

Ten pasek musisz zrobić graficznie. Pogrzeb jeszcze w stylach żeby ustawić tekst gdzie chcesz. Przyda Ci się margin.

Piciek

29.03.2009, 10:53:04

musi sie chyba dac jakos zrobic ten pasek nie tylko graficznie..?

jinchuriki

29.03.2009, 10:54:50

Możesz zrobić diva w divie. Zmniejszysz tylko krycie.

Piciek

29.03.2009, 11:54:47

jestes w stanie mi pomoc w zrobieniu tego diva w divie? bylbym bardzo wdzieczny

kamil4u

29.03.2009, 13:32:20

Skorzystaj z tego: http://rafael.webd.pl/tmp/Slideshow/

- popatrz w kod i przeanalizuj sobie krok po kroku

- sam CSS

mls

29.03.2009, 13:32:28

html:

[HTML] pobierz, plaintext 
<div class="image">
    <img src="..." alt="" />
    <span class="image-desc">Opis do obrazka</span>
</div>
[HTML] pobierz, plaintext

css:

Kod

div.image { overflow: hidden; position: relative; }
div.image span.image-desc { position: absolute; display: block; bottom: 0; left: 0; right: 0; padding: 10px; background: #000; color: #f80; opacity: 0.6; }

piotrooo89

29.03.2009, 14:20:56

Cytat(jinchuriki @ 29.03.2009, 11:45:20 )

Ten pasek musisz zrobić graficznie. Pogrzeb jeszcze w stylach żeby ustawić tekst gdzie chcesz. Przyda Ci się margin.

hmmm... opacity w fx filtry w IE. i nie trzeba kombionować http://olaszewski.com/2008/12/05/przezroczystosc-w-ie/

Piciek

29.03.2009, 14:41:00

Wielkie dzieki wszystkim. Pozdrawiam

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.