Avatar billede gaunt Nybegynder
12. september 2002 - 11:04 Der er 29 kommentarer og
2 løsninger

transparente tables og baggrund.

jeg ville gerne lave en effekt med en baggrund og en table der dækker noget af denne baggrund. Tabellen skal dog være mere hvidtonet end baggrunden, og stadig semi-transparent.

Et perfekt eksempel på det jeg vil lave er www.euph.dk som har det på sine sider.. nogen der ved hvordan dette kan gøres med CSS - da jeg vil tro det er på den måde han har gjort det?

pft
Avatar billede truelz Nybegynder
12. september 2002 - 11:14 #1
table {
background-color: white;
filter: alpha(finishOpacity : 55, style : 1, finishX : 0, finishY : 50)
}
Jeg har ikke selv prøvet det, men jeg tror det kunne virke.
Avatar billede gaunt Nybegynder
12. september 2002 - 11:20 #2
jeg prøver
Avatar billede gaunt Nybegynder
12. september 2002 - 11:27 #3
jeg har indsat

table.outer {
border: black 1px solid;
background-color: white;
filter: alpha(finishOpacity : 55, style : 1, finishX : 0, finishY : 50)
}

i css'en og kalder den med class=outer .. men den bliver 100% hvid stadigvæk :/
Avatar billede truelz Nybegynder
12. september 2002 - 11:28 #4
<html>
<head>
<style>
table {
background-color: white;
filter: Alpha(Opacity=50, FinishOpacity=50, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=0): 30, style : 2, finishX : 50, finishY : 50)
}
</style>
</head>
<body background="graf/and2.jpg">
<table width="100" height="100">
<tr><td>&nbsp;
</td></tr></table>
</body>
</html>
Den her er vist bedre, så kan du bare ændre på parametrene, så de passr til din smag.
Avatar billede gaunt Nybegynder
12. september 2002 - 11:53 #5
Virker det hos dig? for hos mig får jeg bare en helt hvis baggrund i tabellen (og jeg har ændret background til min egen path) :)
Avatar billede truelz Nybegynder
12. september 2002 - 12:13 #6
Jeg beklager, men jeg kan ikke lave noget lige nu, da jeg er på arbejde.
Jeg lægger lige et eksempel ud når jeg for fri kl. 15.00
Hvilken browser bruger du?
Jeg bruger iexplore 5.5
Avatar billede gaunt Nybegynder
12. september 2002 - 12:18 #7
Jeg bruger Galeon - som bygger på Mozilla.
Avatar billede truelz Nybegynder
12. september 2002 - 13:13 #8
Det er nok problemet, en så speciel kode er sikkert ikke standardiseret. Jeg ved ikke hvordan de har lavet det på den side, du omtalte, men jeg kigger nok lige koden i sømmene.
Avatar billede gaunt Nybegynder
12. september 2002 - 13:14 #9
jeg har prøvet at rippe koden, men så forsvinder det hvide fra tabellen .. men det virkede nemlig crossbrowser ;o)
Avatar billede truelz Nybegynder
12. september 2002 - 13:19 #10
Jeg tror desværre jeg må give op nu, men mine evner rækker ikke længere. Jeg håber du finder ud af noget. :-)
Avatar billede gaunt Nybegynder
12. september 2002 - 14:12 #11
okay, tak for din tid alligevel :)
Avatar billede lequet Nybegynder
12. september 2002 - 14:17 #12
Det er jo ganske simpelt :) Manden har lavet en lille 40*40 halvgennemsigtig gif, som han bruger som bg i tabellen, og så bruger han selve billedet som bg i body ;)

Gennemsigtighed kan ikke laves med CSS eller nogen andre sprog, hvis man vel at mærke ønsker at det virker i andet end IE. Skal det være crossbrowser, så brug et billede ligesom der er gjort her.
Avatar billede gaunt Nybegynder
12. september 2002 - 14:25 #13
leguet : det virker dælme lidt omstændeligt at klippe et billede i bidder som skal dække sidens bg og tabellens (tabellers) bg .. og så få det til at se pænt ud og ramme præcist på pixels osv ... *sigh*

Tak til jer begge.
Avatar billede gaunt Nybegynder
12. september 2002 - 14:25 #14
Leguet : lav lige et svar.
Avatar billede lequet Nybegynder
12. september 2002 - 14:29 #15
Værsgo :)

Jeg tror du misforstår... Han har sit billede som han har sat som baggrund i body. Så har han en lille gif som blot er halvgennemsigtig (der er intet på den, andet end lidt hvid farve), som han bruger som baggrund i tabellen. Det er der ikke noget stort magisk og utroligt i, og omstændeligt er det egentlig heller ikke. Håber du forstår hvad jeg mener
Avatar billede gaunt Nybegynder
12. september 2002 - 14:32 #16
Ja,

+---------+
|        |
|      +--+----+
| 1    |2 |    |
|      |  |    |
+------+--+  3 |
      |      |
      +-------+

felt 1 : almindelig side baggrund
felt 2 : en lysere udgave af side baggrunden der passer ind i side baggrund.
felt 3 : ingen baggrund

Er det ikke sådan cirka sådan ?

nu håber jeg min flotte tegning virker ;o)
Avatar billede gaunt Nybegynder
12. september 2002 - 14:32 #17
det gjorde den ikke.... *sigh*
Avatar billede lequet Nybegynder
12. september 2002 - 14:35 #18
Tja...

Body : Sæt background-image : URL("dinbg.gif") ;

Felt1 : Sæt ingen baggrund

Felt2 : sæt background-image : URL("lille_halvgennemsigtig.gif") ;

Felt3 : sæt background-color : white ; Eller hvilken farve der nu passer bedst
Avatar billede lequet Nybegynder
12. september 2002 - 14:38 #19
Takker for points :)
Avatar billede euph Nybegynder
12. september 2002 - 19:20 #20
Nu så jeg lige en række referrers herfra :)

Som leguet har nævnt så er det i princippet bare en gif med skiftevis en hvid pixel og transperant pixel, som er baggrund i content-div'en, og så er det baggrunds-billedet på body der skinner igennem.

Jeg prøvede først med et billede på 2x2px, men det blev for tungt for browseren at rendere - derfor de 40x40px.

Idéen fik jeg fra http://www.independentsday.org/ (prøv og gøre browservinduet så lille at teksten går ind over baggrundsbilledet).
Avatar billede gaunt Nybegynder
12. september 2002 - 20:08 #21
Tænk bare .. så lille er nettet altså .. :)

Jeg har nu lavet et forsøg, som jeg synes virker fornuftigt, som evt kan ses på http://streetwise.dk/jie/index.html :)
Avatar billede martens Guru
12. september 2002 - 20:25 #22
gaunt >> Det er jo lidt snyd :o) Det er jo bare en del af baggrundsbilledet du har smidt ind i tabellen..
Avatar billede gaunt Nybegynder
12. september 2002 - 20:31 #23
martens : ja, for det var som sagt den eneste måde jeg kunne få det til at virke på. Men at kalde det snyd? ;o)

Jeg fik lavet en semitransparent fil på 40x40 pixels, men den smadrer min tekst, som på www.streetwise.dk/testing ... 10 point til den der kommer med en løsning ;o)
Avatar billede gaunt Nybegynder
12. september 2002 - 20:32 #24
Det virker som om teksten er under den semitransparente - hvilket ikke er tilfældet :/
Avatar billede euph Nybegynder
12. september 2002 - 20:51 #25
Avatar billede gaunt Nybegynder
12. september 2002 - 20:55 #26
hm suspekt. det er min interne adresse .. det *burde* virke.. but then again .. min server har satme opført sig weird det sidste stykke tid..

http://streetwise.dk/testing/index.html er den direkte URL ...
Avatar billede gaunt Nybegynder
12. september 2002 - 20:57 #27
Kan du egentlig heller ikke se www.streetwise.dk så ?
Avatar billede euph Nybegynder
12. september 2002 - 20:59 #28
Hvordan har du bygget din gif op?

Hvad sker der hvis du bruger http://euph.dk/site/gfx/mainbg.gif istedet?

>streetwise.dk
Det går fint nok...
Avatar billede gaunt Nybegynder
12. september 2002 - 22:00 #29
den er bygget op v.hj.a 40x40 pixels og er en PNG ;o)
jeg suger lige den fil på et tidspunkt og prøver med den.
Avatar billede gaunt Nybegynder
12. september 2002 - 22:03 #30
der har været udfald på serveren .. den burde køre igen, prøv evt lige /Testing igen.
Avatar billede gaunt Nybegynder
12. september 2002 - 22:05 #31
fejlen er fundet .. det er fordi baggrunden er sort .. og det er teksten osse ;o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

IT-JOB

Forsvarsministeriets Materiel- og Indkøbsstyrelse

Junior Projektkonsulent til program Digital og Operativ Transformation

Capgemini Danmark A/S

Strategy & Transformation Consultant

Forsvarets Efterretningstjeneste

Linux Infrastructure Specialist

Kræftens Bekæmpelse

IT-driftsleder