Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS][HTML] Baner na stronie jak częściowo przesłonić?
krzysiekj
post 10.03.2011, 18:06:39
Post #1





Grupa: Zarejestrowani
Postów: 77
Pomógł: 0
Dołączył: 25.04.2007

Ostrzeżenie: (0%)
-----


Ciężko mi było nazwać temat wątku dlatego może nie jest on za przejrzysty. Bez ukazania o co mi chodzi nie byłbym w stanie wytłumaczyć.
jak zakodować w html i css taką stronę, żeby zdjęcie które jest zamieszczone centralnie można było zmieniać zmieniając plik na serwerze na inny. Gdyby zdjęcie było prostokątne to problemu nie widzę. tworzę Div w nim <img src=.... i po sprawie. Zmiana pliku i pojawia się inne zdjęcie. Co jednak zrobić w moim przypadku? Chodzi o to, że na dole zdjęcia jest nieregularny kształt. Jak zrobić w html i css takie przesłonięcie od dołu tymi falami. Bo rozumiem, że zdjęcie nadal zamieszczone jako prostokąt i przesłonięte tylko na dole z dwóch stron. Czy ktoś podpowie jak to zrobić?



Ten post edytował krzysiekj 10.03.2011, 18:43:13
Go to the top of the page
+Quote Post
Kujski
post 10.03.2011, 19:02:31
Post #2





Grupa: Zarejestrowani
Postów: 104
Pomógł: 14
Dołączył: 28.09.2008
Skąd: W.

Ostrzeżenie: (0%)
-----


Rozumiem, że taki kształt zdjecia ma pozostać? Jeżeli tak to proponuję mimo wszystko zrobić to jako prostokątny div dodać do tego tło jako obrazek *.png z przezroczystością na kształcie i tyle.


--------------------
Sukces to droga od jednej porażki do drugiej, bez zmniejszonego entuzjazmu.
Go to the top of the page
+Quote Post
krzysiekj
post 10.03.2011, 19:10:03
Post #3





Grupa: Zarejestrowani
Postów: 77
Pomógł: 0
Dołączył: 25.04.2007

Ostrzeżenie: (0%)
-----


Cytat(Kujski @ 10.03.2011, 19:02:31 ) *
Rozumiem, że taki kształt zdjecia ma pozostać? Jeżeli tak to proponuję mimo wszystko zrobić to jako prostokątny div dodać do tego tło jako obrazek *.png z przezroczystością na kształcie i tyle.


Tak kształt zdjęcia ma pozostać. Stronę zakodować muszę tak jak jest ale, żeby zdjęcie móc potem podmieniać sam plik bez ingerencji w kod. Czyli wstawiam zdjęcie jako prostokątne do prostokątnego Diva jako tło w css. A do samego diva wstawiam fale z przezroczystością? I będzie ok?

Ten post edytował krzysiekj 10.03.2011, 19:11:24
Go to the top of the page
+Quote Post
Kujski
post 10.03.2011, 19:23:51
Post #4





Grupa: Zarejestrowani
Postów: 104
Pomógł: 14
Dołączył: 28.09.2008
Skąd: W.

Ostrzeżenie: (0%)
-----


Gotowca nie dostaniesz, ale Cię naprowadzę.

Robisz div, w którym wstawiasz sobie w stylach w background-image: odnośnik do zdjęcia. W tym div'e zagnieżdżasz drugiego z dolną falą zrobioną tak, aby to co ma być w tym dziwnym kształcie było przezroczyste (efekt osiągniesz w programie graficznym) wypozycjonowany do dołu div'a ze zdjęciem. Ewentualnie zamiast zagnieżdżać div'a dajesz w tym ze zdjęciem img z odpowiednim wypozycjonowaniem.


--------------------
Sukces to droga od jednej porażki do drugiej, bez zmniejszonego entuzjazmu.
Go to the top of the page
+Quote Post
krzysiekj
post 10.03.2011, 19:29:38
Post #5





Grupa: Zarejestrowani
Postów: 77
Pomógł: 0
Dołączył: 25.04.2007

Ostrzeżenie: (0%)
-----


Cytat(Kujski @ 10.03.2011, 19:23:51 ) *
Gotowca nie dostaniesz, ale Cię naprowadzę.

Robisz div, w którym wstawiasz sobie w stylach w background-image: odnośnik do zdjęcia. W tym div'e zagnieżdżasz drugiego z dolną falą zrobioną tak, aby to co ma być w tym dziwnym kształcie było przezroczyste (efekt osiągniesz w programie graficznym) wypozycjonowany do dołu div'a ze zdjęciem. Ewentualnie zamiast zagnieżdżać div'a dajesz w tym ze zdjęciem img z odpowiednim wypozycjonowaniem.

Kolego nie chciałem gotowca tylko właśnie naprowadzenia i to zrobiłeś. W moim poście wyżej właśnie tak pomyślałem jak napisałeś. Czy zadziała mi to jeśli fale zrobię w *.gif przezroczystym?
Go to the top of the page
+Quote Post
Kujski
post 10.03.2011, 19:31:56
Post #6





Grupa: Zarejestrowani
Postów: 104
Pomógł: 14
Dołączył: 28.09.2008
Skąd: W.

Ostrzeżenie: (0%)
-----


Powinno zadziałać. Uważaj tylko na odwzorowanie kolorów prze gif wink.gif


--------------------
Sukces to droga od jednej porażki do drugiej, bez zmniejszonego entuzjazmu.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 24.07.2025 - 23:41