Testy: Monitory - Urządzenia wielofunkcyjne atramentowe - Notebooki - Kamery HD - Lustrzanki - Aparaty kompaktowe
 
Moje konto
• Zaloguj się
• Nowy użytkownik
 

 Wiadomości
 Poradnik
      www
      dtp
 Artykuły
 Achiwum
 Turniej Drukarń
 Biblioteka
 Galeria
 FTP
 Forum
 Czcionki


Reklama
Redakcja

IDG ONLINE
IDG.pl
Computerworld
PC World
Ranking Produktów PCW
Business Center PCW
NetWorld
Macworld
CEO
CIO
CFO
CSO
Kino Domowe
Kino.idg.pl
Tips & Tricks
Gamestar
IT Partner
ITpedia
Internet Standard
JOB Universe
ZOOM
Fotografia
Android Life
poradnik
Przezroczyste pole tekstowe (HTML/CSS)
08.08.2007 16:55 		wyślij  drukuj
Praktyczny przykład zastosowań przezroczystości w tworzeniu elementów div - napis w przezroczystej komórce, na tle kolorowego tła.

Trzeba zacząć od stworzenia elementu div (class="background") o stałych wymiarach. Element ten musi posiadać tło, np. w postaci pliku graficznego i określoną ramkę. Potem należy w jego obrębie stworzyć mniejszy element blokowy (class="transbox") o podobnych atrybutach. Ten element będzie przezroczysty.

Poniżej - przykładowy kod (więcej informacji w serwisie W3Schools.com)










tekst tekst tekst tekst
LK



Uwaga! Konfiguracja sprzętowa komputera, posiadany system operacyjny wraz z uaktualnieniami, a także inne zainstalowane w systemie programy mogą mieć wpływ na skuteczność wskazówek prezentowanych w sekcji "Porada dnia". W przypadku niektórych konfiguracji sprzętowo-programowych zastosowanie się do danej porady może nie przynieść efektu - redakcja nie ponosi za to odpowiedzialności.
Aby otrzymywać informacje o nowych poradach bezpośrednio na adres skrzynki pocztowej, dokonaj subskrypcji bezpłatnej listy mailingowej "Poradnik WWW"


archiwum poradnika
Udostępnij na Facebooku! Wykop to Dodaj do delicji Dodaj do Twittera! Dodaj do Blip! Dodaj do Flakera! Dodaj do Digg! Dodaj do Śledzika!
Komentarze
Redakcja Digit nie ponosi odpowiedzialności za wypowiedzi Internautów opublikowane na stronach serwisu oraz zastrzega sobie prawo do redagowania, skracania bądź usuwania komentarzy zawierających treści zabronione przez prawo, uznawane za obraźliwie lub naruszające zasady współżycia społecznego.
neonxocena: brak ocenyIP: 85.89.175.10123-12-2009, 00:52
Temat widze stary aleee to tak jak by ktoś szukał. Wystarczy dodać
style="background:transparent"
i wtedy pole ma przezroczyste tło ;)
godlotomocena: 3IP: 62.179.33.3111-10-2007, 02:09
Proponuję takie rozwiązanie:



<html>
<head>
<style type="text/css">

BODY {background-color: #f0f0f0; }
TABLE {color: #696969; font-family: verdana, tahoma; font-size: 12px;}


INPUT {background-color: #e5e5e5; border: solid 1px #696969; color: #363636; font-family: verdana, tahoma; font-size: 12px; width:250px;}

INPUT.required {background-color:#e5e5e5; border-bottom: solid 1px red; border-top: 0px; border-left: 0px; border-right:0px; color: #363636; font-family: verdana, tahoma; font-size: 12px;}

div.formularz {background-color: #e5e5e5; padding: 15px; width: 50%; border: dotted 1px #696969;}

BUTTON {background-color: #e5e5e5; border: solid 1px #696969; cursor: hand;}

</style>
</head>
<body>

<center>
<br/>
<br/>
<div class="formularz">
WERSJA PRZEZROCZYSTA
<table border="0" width="300px">
<tr>
<td align="right">
Imię:
</td>
<td align="left">
<INPUT />
</td>
</tr>
<tr>
<td align="right">
Nazwisko:
</td>
<td align="left">
<INPUT />
</td>
</tr>
<tr>
<td align="right">
Adres:
</td>
<td align="left">
<INPUT />
</td>
</tr>
<tr>
<td colspan="2" align="right">
<BUTTON>Zapisz</BUTTON>
</td>
</tr>
</table>
</div>

</br><br/>
<div class="formularz">
WERSJA Z OBOWIAZKOWYMI POLAMI (czerwone)
<table border="0" width="300px">
<tr>
<td align="right">
Imię:
</td>
<td align="left">
<INPUT class="required" />
</td>
</tr>
<tr>
<td align="right">
Nazwisko:
</td>
<td align="left">
<INPUT class="required" />
</td>
</tr>
<tr>
<td align="right">
Adres:
</td>
<td align="left">
<INPUT />
</td>
</tr>
<tr>
<td colspan="2" align="right">
<BUTTON>Zapisz</BUTTON>
</td>
</tr>
</table>
</div>
</body>
</html>
Kubaocena: 3IP: 217.153.184.5009-08-2007, 09:21
Efekt ciekawy.
Tylko niezgodny ze standardami (W3C) World Wide Web Consortium
jaocena: brak ocenyIP: 83.26.219.6908-08-2007, 23:29
hm...wszystko fajnie, tylko, że razem z polem tekstowym blednie również tekst, jak to obejść?

  Liczba zatwierdzonych komentarzy: 4   dodaj swój komentarz »  

 


Zobacz też
• Adobe prezentuje GoLive 6 i LiveMotion 2
• WebObjects 5.1 w standardzie Java
• Mergemill 1.0 generuje strony WWW
• Graficzna oprawa WWW z Webstyle 2.1
• Norpath Elements Design Studio Pro dla Mac OS X
• Albumy HTML w Image Rodeo
• CoffeeCups dla webmasterów
• GoLive 6.0 i LiveMotion 2.0 dostępne
• Macromedia ulepsza Flasha
• ColdFusion i Flash bliżej
 
Kto wygra polski finał Imagine Cup 2011
CeBIT 2011: Fujitsu Stylistic 550 - biznesowy tablet z Windows 7

Subskrypcje
wiadomości
nowy numer
poradnik dtp
poradnik www
nowości ftp mac os
Wersja:
html  txt
opisy list mailingowych


IDG Poland S.A.
© 1999-2012
  04-204 Warszawa
ul. Jordanowska 12
 
DIGIT
digitonline@idg.com.pl
   tel. (48 22) 321 78 00
fax: (48 22) 321 78 88
Korzystanie z serwisu Digit Online jest jednoznaczne z wyrażeniem zgody na następujące warunki obsługi. Serwis realizuje wytyczne ASME oraz uzupełnienia IDG dot. zasad publikacji w mediach elektronicznych.
IDG.pl Powrót do strony głównej
Ochrona prywatności

Regulamin