+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: jak zrobić taki efekt (/thread-jak-zrobic-taki-efekt--4589)
jak zrobić taki efekt - lesnynt - 04-08-2010
Witam czy ktoś wie jak zrobić taki efekt jak na stronie http://www.sportowezaglebie.pl/ chodzi o ten efekt gdy na zdjęciu pojawia się na pasek z tłem w tym przypadku zielonym który jest zarazem przeźroczysty i na nim znajduje sie tekst.
Wiem że tam to jest efekt jakiegoś pewnie systemu newsów ale czy można to uzyskać w jakis inny sposób??
z góry dzięki za odpowiedz
RE: jak zrobić taki efekt - Kartofelek - 04-08-2010
Kod:
<div class="zielone_cos">
<img src="obrazek.jpg" width="300" height="200" alt="" />
<div>
Opis na zielonym tle
</div>
</div>
.zielone_cos {
position:relative; height:200px; width:300px
}
.zielone_cos img {
width:300px;
height:200px;
display:block;
}
.zielone_cos div {
position:absolute;
bottom:0;
left:0;
width:280px;
height:40px;
overflow:hidden;
padding:10px;
font:11px Tahoma;
color:#fff;
background:green;
opacity:0.8;
z-index:1000
}RE: jak zrobić taki efekt - lesnynt - 04-08-2010
Dzięki wielkie a jak zrobić aby to tło było delikatnie przeźroczyste??
RE: jak zrobić taki efekt - Kartofelek - 04-08-2010
Nadając style:
-moz-opacity:0.8; - dla wcześniejszych firefoxow itp. - raczej jako ciekawostka
opacity:0.8; - dla wszystkich normlanych przeglądarek
filter:alpha(opacity=80); - tak dla jedynej słusznej przeglądarki
RE: jak zrobić taki efekt - lesnynt - 05-08-2010
Dzieki po raz kolejny Kartofelek ale tym razem albo ja coś źle robie albo coś jest nie tak bo tło nadal nie jest półprzeźroczyste
RE: jak zrobić taki efekt - Kartofelek - 05-08-2010
.zielone_cos div {
position:absolute;
bottom:0;
left:0;
width:280px;
height:40px;
overflow:hidden;
padding:10px;
font:11px Tahoma;
color:#fff;
background:green;
z-index:1000;
-moz-opacity:0.8;
opacity:0.8;
filter:alpha(opacity=80);
}
Działa na bank ;]
Sprawdź pod różnymi przeglądarkami.