Przezroczyste pole tekstowe (HTML/CSS) : Aktualności Tips & Tricks Online

Digit — 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)

<html>
<head>

<style type="text/css">
div.background
{
width: 400px;
height: 200px;
background: url(grafika.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
width: 400px;
height: 200px;
margin: 20px 40px;
background-color: #ffffff;
border: 1px solid black;
filter:alpha(opacity=40);
opacity:0.4;
-moz-opacity:0.4;
}
div.transbox p
{
margin: 20px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>

<body><div class="background">
<div class="transbox">
<p>tekst tekst tekst tekst</p>
</p>
</div>
</div>

</body>
</html>

wydrukuj

wyślij znajomemu

skomentuj

KOMENTARZE CZYTELNIKÓW

neonx	ocena: brak oceny	IP: 85.89.175.101	23-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 ;)

godlotom	ocena: 3	IP: 62.179.33.31	11-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>

Kuba	ocena: 3	IP: 217.153.184.50	09-08-2007, 09:21
Efekt ciekawy. Tylko niezgodny ze standardami (W3C) World Wide Web Consortium

ja	ocena: brak oceny	IP: 83.26.219.69	08-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 »

Konfiguracja zapisu punktów przywracania w Windows 7 (04.11.2011 19:29)
Zapis punktów przywracania to jeden ze sposobów zabezpieczenia się przed awarią systemu i oprogramowania. Warto wiedzieć, jak konfigurować zajmowane przez nie miejsce, usuwać stare kopie czy rejestrować własne. Dzięki temu nie stracisz na poziomie bezpieczeństwa, a zyskasz na przestrzeni na dysku.

Adobe Flash Player z wsparciem dla systemów 64 bitowych (17.09.2010 16:08)
Firma Adobe wydała właśnie wersję testową swojego Flash Playera. Aplikacja nazwana "Square" oferuje natywne wsparcie dla systemów 64-bitowych.

CrossOver 9.1 - programy i gry z Windows na Mac OS X (29.07.2010 11:23)
Code Weavers udostępniło nową wersję programu CrossOver, który umożliwia uruchamianie programów z systemu Windows na platformę Mac OS. W nowej wersji oznaczonej cyframi 9.1 poprawiono między innymi obsługę pakietu MS Office oraz kombajnu Windows Media Player 9.

AutoRuns 10.01 - prosta optymalizacja zasobów komputera (15.07.2010 13:49)
AutoRuns 10.01 jest nieskomplikowaną aplikacją opracowaną przez Microsoft, która umożliwia łatwe przyspieszenie działania komputera, dzięki m.in. zoptymalizowaniu listy programów, uruchamianych wraz z systemem operacyjnym. AutoRuns jest prosty w obsłudze i nie sposób popełnić błąd, który doprowadzi do awarii komputera - każdą zmianę można cofnąć, jednak nie powinno być problemu, jeśli użytkownik będzie uważnie korzystał z możliwości narzędzia.

System Cleaner 5.91c - czyszczanie Windows (07.07.2010 09:34)
W każdym systemie podczas pracy pozostają różne śmieci, niepotrzebne pliki, wpisy w rejestrze. Obciążają one niepotrzebnie Windows i spowalniają jego pracę. Zainstaluj System Cleaner i pozbądź się zbędnych danych.

Uxtheme Multi-patcher - usuń blokadę styli w Windows (29.06.2010 11:52)
W internecie można znaleźć wiele skórek i tematów wizualnych do Windows. Aby korzystać bez problemu ze wszystkich trzeba zmodyfikować system za pomocą Uxtheme.

Adobe AIR - nowa wersja 2.0.2 dostępna do pobrania (11.06.2010 14:01)
Ukazała się nowa wersja środowiska wykonawczego od Adobe, czyli AIR. Jest to technologia, która umożliwia korzystanie z wielu usług znanych dotychczas z zaawansowanych witryn internetowych, wprost z pulpitu komputera bez konieczności używania przeglądarki. Dodatkowo, pod AIR powstało wiele dedykowanych, zaawansowanych aplikacji, z których warto skorzystać.

Flash 10.1 - finalna wersja do pobrania (11.06.2010 09:12)
Adobe udostępniło stabilną wersję wtyczki Flash Player 10.1, umożliwiającej przeglądanie sieciowych multimediów.

Backup4all Professional 4.4.207 - kopia zapasowa dla każdego (21.05.2010 12:59)
Regularne zapisywanie kopii zapasowych gwarantuje bezpieczeństwo danych. Aby jednak nie tracić na to zadanie zbyt wiele czasu zautomatyzuj proces archiwizacji za pomocą Backup4all.

Total Recorder Pro 8.1 - nagraj rzeczy niemożliwe (19.05.2010 16:13)
Jeżeli masz kłopot z zapisem dźwięku z jakiegoś źródła skorzystaj z wyspecjalizowanego narzędzia. Za pomocą Total Recorder Pro zarejestrujesz każdy strumień audio, który przepływa przez twoja kartę dźwiękową.

Warunki obsługi - Regulamin
Polityka prywatności Licencjonowanie treści