Avatar billede lerchedahl Nybegynder
13. november 2001 - 15:21 Der er 32 kommentarer og
2 løsninger

\"Gradient\" baggrund

Hej eksperter.

Hvordan laver man nemmest en \'gradient\' baggrund på sin HTML side? Det må ikke indvolvere grafikelementer, det skal altså være ren kode!
Kan man klare den med css, eller kræver det en masse javascript?
Det skal bare være mellem to farver, men må gerne kunne modificeres til at indvolvere et virvar af farveeksplosioner i alle regnbuens fantastiske nuancer... ;-P

På forhånd tak
/Lerchedahl
Avatar billede andreasha Nybegynder
13. november 2001 - 15:23 #1
wauv =)
Avatar billede lerchedahl Nybegynder
13. november 2001 - 15:34 #2
Jeg ved det kan lade sig gøre, da jeg har set det før (med javascript). Jeg kan bare ikke huske hvor, det er længe siden...
Avatar billede callesen Praktikant
13. november 2001 - 15:40 #3
I IE > 5:
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR=\"#0080C0\" STYLE=\"filter:alpha(opacity=0, finishopacity=50, style=1);\">
</BODY>
</HTML>
Avatar billede lerchedahl Nybegynder
13. november 2001 - 15:44 #4
Sorry, den har jeg prøvet uden held. Dette virker ikke...

<style>
body    {background-color: #0080C0; filter:alpha(opacity=0, finishopacity=50, style=1);
</style>
Avatar billede lerchedahl Nybegynder
13. november 2001 - 15:45 #5
ja, jeg huskede \'}\' i mit oprindelige dokument...
Avatar billede olebole Juniormester
13. november 2001 - 15:50 #6
<ole>
Brug den rigtige syntaks, så går det fint:

filter: progid:DXImageTransform.Microsoft.Alpha( style=1,opacity=100,finishOpacity=0,startX=0,finishX=100,startY=0,finishY=0);

...eller du kan bruge et gradient-filter  :)
/mvh
</bole>
Avatar billede lerchedahl Nybegynder
13. november 2001 - 15:52 #7
Hvis jeg bruger din metode i et fuldstændigt tomt html dokument, kan jeg godt få det til at virke, men slet ikke optimalt.

Jeg ønsker en flydende overgang, og med dit eksempel fremkommer der bare en masse tykke vertkale striber hen over skærmen...
Avatar billede lerchedahl Nybegynder
13. november 2001 - 15:53 #8
den sidste kommentar var til callesen...
Avatar billede olebole Juniormester
13. november 2001 - 15:55 #9
Tør vædde på, du kører du 256 farver - for så *skal* en så lang gradient \'bande\' ...ellers sker det ikke  :)
Avatar billede lerchedahl Nybegynder
13. november 2001 - 15:57 #10
olebole >> Det virker simpelt hen ikke...
Er du sikker på at det har noget med DXImageTransform at gøre? Det lyder forkert (men hvad ved jeg... ;-P )

Derudover, må du gerne uddybe dit gradient filter lidt...
Avatar billede lerchedahl Nybegynder
13. november 2001 - 15:57 #11
Nej, jeg kører 24 bit...
Avatar billede lerchedahl Nybegynder
13. november 2001 - 15:59 #12
Nå, jeg må se at komme hjemad (sidder på arbejdet), men jeg tjekker tilbage hjemmefra om en times tid...

Avatar billede callesen Praktikant
13. november 2001 - 15:59 #13
Det virker fint her.
Avatar billede olebole Juniormester
13. november 2001 - 19:16 #14
En gradient på 1150 pixels har jeg ikke problemer med at få jævn  :)
/mvh
Avatar billede callesen Praktikant
13. november 2001 - 19:25 #15
Jeg glemte måske at tilføje, at jeg afprøvede i de ni forskellige skærmopløsningsmuligheder jeg har (w=800,1024 og 1280). Kun med 8bpp ser det lidt kornet ud - men hvad gør ikke det.
Avatar billede lerchedahl Nybegynder
14. november 2001 - 10:44 #16
olebole>> Jeg kan ikke få det til at virke...
Derudover, *hvis* det virkede, hvordan ville jeg så kunne bestemme hvilke to farver der skulle \'mixes\'. Så vidt jeg kan se består din gradient af et skift i opacity, hvilket ikke giver mig mulighed for at bestemme farve nummer 2, eller...?

Jeg sidder ved en maskine med IE 5.0, er det derfor at dette ikke virker?:

<body style=\"background-color: #0080C0; filter: progid:DXImageTransform.Microsoft.Alpha( style=1,opacity=100,finishOpacity=0,startX=0,finishX=1000,startY=0,finishY=0);\">

----------------------------------

Kan du ikke lave det ved hjælp af javascript?

vh
Lerchedahl
Avatar billede olebole Juniormester
14. november 2001 - 10:53 #17
Du kan sætte et filter med JavaScript, men hvad ville du opnå med det?
Du kan jo bare sætte en rød baggrundsfarve på body\'en. Så lægger du en rød gif over med et alpha-filter på = gradient fra blå til rød.

Det virker dog først fra IE5.5  ;o)
/mvh
Avatar billede lerchedahl Nybegynder
14. november 2001 - 10:54 #18
I skal have tak for hjælpen, selvom det ikke virker optimalt. Jeg lader 5 point ligge til en evt. js-løsning - håber det er ok...

/lerchedahl
Avatar billede lerchedahl Nybegynder
14. november 2001 - 10:55 #19
hmm, jeg troede jeg lod 5 point ligge, det gjorde jeg åbenbart ikke :-(

Så meget for en løsning med javascript...
Avatar billede lerchedahl Nybegynder
14. november 2001 - 10:56 #20
olebole >> \"...Det må ikke indvolvere grafikelementer, det skal altså være ren kode!...\"
Avatar billede olebole Juniormester
14. november 2001 - 11:07 #21
Jamen, så brug dog et rødt span...!
Der findes iøvrigt ingen JavaScript-løsning på problemet.
/mvh
Avatar billede lerchedahl Nybegynder
14. november 2001 - 11:15 #22
Jeg er 100 på at jeg har set en løsning med javascript. Der behøvede man heller ikke at nøjes med 2 farver...

Nå, skidt med det, det var alligevel bare af ren og skær nysgerrighed. Hvis jeg skulle bruge det til noget seriøst, ville jeg ikke tøve et sekund med at åbne Photoshop ;-P

Tak for jeres svar
/Lerchedahl
Avatar billede olebole Juniormester
14. november 2001 - 11:25 #23
Regel #1, når du vil anvende en teknologi, du ikke kender: \"Søg i leverandørens dokumentation\"  :)

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/filter.asp
/mvh
Avatar billede olebole Juniormester
14. november 2001 - 11:25 #24
Du *KAN* ikke lave noget med JavaScript - to eller mange farver!
/mvh
Avatar billede lerchedahl Nybegynder
14. november 2001 - 11:47 #25
Jeg kender udmærket til filtrene i css, og *har* læst microsofts referencer op til flere gange, hvorfor jeg også spurgte efter en nem løsning (evt. med javascript, hvilket foresten godt kan lade sig gøre!)

Du virker fuldstændig overbevist om at javascript ikke kan klare det, hvad bygger du din overbevisning på? Jeg er helt sikker på at jeg har set det!!
Avatar billede olebole Juniormester
14. november 2001 - 12:03 #26
At jeg kender JavaScript rimelig forfra og bagfra - og det er ikke en overbevisning ...jeg *ved*, du ikke kan  :)

Det er muligt, du har læst reference-dokumenterne op til flere gange, men så kan jeg ikke forstå, hvad du efterlyser en uddybning af gradient-filtret for ...jeg ved ikke mere om det end MS og det er udførligt beskrevet hos dem.

Nu synes jeg efterhånden, du skal vise os, hvordan man laver det i JavaScript - i stedet for bevidstløst at gentage den samme fejlpåstand!

PS: Jeg har mødt flere, der hårdnakket påstår, de har set Gud.
Jeg kan jo ikke tillade mig at påstå, de er psykotiske eller fyldt med løgn - men jeg kan konstatere, at jeg aldrig personlig mødt ham og kender mange gange flere, der heller ikke har set ham, end folk, der har.
Jeg har betydelig mere begreb om HTML/JavaScript end om religiøse emner og jeg er *helt* sikker på, du må have haft en religiøs åbenbaring ....du *kan* ikke lave det i JS!
/mvh
Avatar billede olebole Juniormester
14. november 2001 - 12:06 #27
Filterene har iøvrigt ikke det fjerneste med CSS at gøre - så det kender du altså heller ikke \'udmærket til\'  =o)
/mvh
Avatar billede lerchedahl Nybegynder
14. november 2001 - 12:29 #28
Jeg giver mig, jeg vil ikke sidde her og påstå at du lyver, og hvis du har oplevet det sådan, så undskylder jeg. Jeg skal heller ikke stille spørgsmålstegn ved dine kompetencer indenfor javascript. Jeg må åbenbart have set fejl, det er stadigvæk en del år siden jeg (troede jeg) så det...

Jeg gider ikke skændes, jeg ville bare høre om der var en nem løsning på problemet.

/lerchedahl

PS: jeg ved ikke med dig, men jeg angiver mine filter-properties i mit stylesheet... Det var det jeg mente med css.
Avatar billede olebole Juniormester
14. november 2001 - 12:37 #29
Jeg opfatter det ikke, somom du påstår at jeg lyver - blot at du er yderst standhaftig i din påståelighed ...og ja, det må være noget, du har troet, du så  ;o)

I CSS bruger man stylesheets - men stylesheets er ikke dermed CSS.
CSS er en vedtaget standard (anbefaling, om du vil) fra W3C. De filtre, du bruger, er noget MS har fundet på. De er MS\' helt private teknologi, som intet har med CSS at gøre  ;o)
/mvh
Avatar billede olebole Juniormester
14. november 2001 - 12:39 #30
PS: Du kan f.eks. bruge en masse stylesheet-halløj i NS4.X - men NS4.X understøtter overhovedet ikke CSS. Det er ikke nødvendigvis det samme  ;o)
/mvh
Avatar billede lerchedahl Nybegynder
14. november 2001 - 12:48 #31
Point taken.

Tilbage til hvad eksperten i virkeligheden handler om:

Jeg har nemlig lige et spørgsmål angående den gradient som genereres af din kode.

Når jeg skriver noget i mit dokument, har min gradient også effekt på teksten, er det fordi at mit filter står i \'body {}\' og er der ikke noget at gøre ved det?

Jeg vil gerne kunne skrive helt \'opaque\' tekst hen over baggrunden, som om den var et billede...

/Lerchedahl
Avatar billede olebole Juniormester
14. november 2001 - 12:51 #32
Lav det hele i to <div>\'s med forskelligt z-index. I det med det lave index lægger du gradienten og i det andet lægger du dit sideindhold.
/mvh
Avatar billede lerchedahl Nybegynder
14. november 2001 - 12:57 #33
tænkte nok jeg blev nødt til at gøre det sådan...

Tak for din hjælp (c:

/lerchedahl
Avatar billede olebole Juniormester
14. november 2001 - 13:41 #34
... anytime  ;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