Toon posts:

[ps7] afbeelding met transparante randen op gradient website

Pagina: 1
Acties:

Verwijderd

Topicstarter
beetje aparte titel, maar dit is het probleem. Ik hoop dat iemand het een beetje snapt:

Mijn vader heeft een website waarin de kleur over de hele pagina verloopt van groen naar wit. Nu wil hij hier een afbeelding op zetten die transparante randen heeft en dus vanuit het midden langzaam overgaat in de achtergrond. Ik heb al gegoogled maar dat wilde niet lukken. Weet iemand hoe ik van een vierkante afbeelding de randen (of eventueel alles vanuit het midden) kan laten vervagen naar de achtergrond dmv transparantie? De transparantie is dus nodig omdat de achtergrond zelf overloopt van groen naar wit. Ondertussen pruts ik zelf ook nog even...

  • sdomburg
  • Registratie: Augustus 2001
  • Laatst online: 03-09-2024
Dit kan dus gewoon niet. Je moet transparantie in gifs gewoon zien al een extra kleur. Bij faden zou je dus die kleur moeten mengen met de achtergrond --> onmogelijk.

Wat je wel kan doen, is kijken wara het plaatje komt, print screenen en dan uitknippen waar het plaatje komt, zodat je een gedeelte van de gradient in je plaatje hebt. Met transparantie gaat dit niet werken :)

Verwijderd

Topicstarter
sdomburg schreef op 31 december 2002 @ 18:52:
Dit kan dus gewoon niet. Je moet transparantie in gifs gewoon zien al een extra kleur. Bij faden zou je dus die kleur moeten mengen met de achtergrond --> onmogelijk.

Wat je wel kan doen, is kijken wara het plaatje komt, print screenen en dan uitknippen waar het plaatje komt, zodat je een gedeelte van de gradient in je plaatje hebt. Met transparantie gaat dit niet werken :)
hmm juist ja...

Verwijderd

Met png kom je geloof ik al een heel eind verder, maar dat wordt door bv IE6 nog niet goed ondersteund en da's toch wel een vereiste :S

  • coubertin119
  • Registratie: Augustus 2002
  • Laatst online: 20-08 15:43
Voor zover ik het begrijp (dus je paps heeft een dynamische achtergrond veronderstel ik) zou een animated gif kunnen helpen, dus de achtergrond van je plaatje laten veranderen zoals je achtergrond, maar das véél werk, en bij iedere kleurverandering zal het moeten aangepast worden.

Skat! Skat! Skat!


Verwijderd

Nu wil hij hier een afbeelding op zetten die transparante randen heeft en dus vanuit het midden langzaam overgaat in de achtergrond.
Kan je dan niet beter met CSS filters werken? (filters.Alpha.Opacity)

Verwijderd

Verwijderd schreef op 31 December 2002 @ 20:32:
[...]

Kan je dan niet beter met CSS filters werken? (filters.Alpha.Opacity)
Dan zul je voor elke rand pixels een andere opacitiy moeten nemen en dus voor elke rand pixels een ander plaatje, met alle pixels waarvoor een andere opacity geldt op transparant... beetje vage uitleg maar het is mogelijk maar pókke veel werk, erg groot qua omvang en netschaap zal het waarschijnlijk niet goed weergeven. laat staan dat msie niet crasht bij de weergave daarvan :)

je kunt inderdaad beter het plaatje een vaste positionering geven en kijken welk stukje van de kleurovergang op die plek op de achtergrond en die ook gebruiken als layer in ps.

  • HunterPro
  • Registratie: Juni 2001
  • Niet online
coubertin119 schreef op 31 December 2002 @ 20:19:
Voor zover ik het begrijp (dus je paps heeft een dynamische achtergrond veronderstel ik) zou een animated gif kunnen helpen, dus de achtergrond van je plaatje laten veranderen zoals je achtergrond, maar das véél werk, en bij iedere kleurverandering zal het moeten aangepast worden.
:? :?

wat miep jij nou weer met een animated gif :?

hoe wil je dan in godsnaam een opacity van bijvoorbeeld 50% bereiken :?

  • HunterPro
  • Registratie: Juni 2001
  • Niet online
behulpzaam linkje voor de topicstarter (gewoon PNG's gebruiken dus!):

[rml][ css] IE-filters toepassen op PNG met alpha in IE 6[/rml]

  • coubertin119
  • Registratie: Augustus 2002
  • Laatst online: 20-08 15:43
|HunterPro| schreef op 31 december 2002 @ 21:34:
[...]

:? :?

wat miep jij nou weer met een animated gif :?

hoe wil je dan in godsnaam een opacity van bijvoorbeeld 50% bereiken :?
Voor zover ik het begrijp met m'n hoofd vol slaap heeft hij een van kleur veranderde achtergrond en een transparante gif die mee moet veranderen van kleur, maar das toch zeker fout, sorry |:(
* :O doe ik nou.

Skat! Skat! Skat!


Verwijderd

Topicstarter
ik zal het nogmaals proberen uit te leggen.

De website heeft een vaste achtergrond, niet dynamisch dus. Deze achtergrond is vrij eenvoudig; boven in beeld groen, onderin beeld wit, en deze kleuren lopen heel langzaam in elkaar over. Het idee was om een afbeelding te plaatsen die langzaam overloopt in de achtergrond zodat hij niet zo afsteekt. Ik dacht dus dat het mogelijk was om een afbeelding een transparante rand te geven met een soort van gradient zodat deze vanuit het midden naar de rand steeds meer overgaat in die groen/witte achtergrond. Dit zou dus betekenen dat als je dat plaatje voor een paarse achtergrond zou zetten, de afbeelding naar paars zou overlopen. Dit schijnt alleen niet mogelijk te zijn met gif. En png schijnt niet goed te werken. Ik ga dus maar voor de oplossing met het overlopen naar een stukje achtergrond. Het is jammer dat het plaatje dan een vaste plaats krijgt en dat ik hem dus niet ergens anders kan neerzetten zonder al te veel werk, maar dat is niet anders...(geloof ik) :D

  • HunterPro
  • Registratie: Juni 2001
  • Niet online
als je de code uit het topic waar ik naar linkte gebruikt kun je gewoon PNG's gebruiken en is er geen vuiltje aan de lucht.

Verwijderd

printscreen is denk ik de enige oplossing... en dan misschien nog een scriptje (als dat nodig is) gebruiken om de achtergrond stil te laten staan bij het scrollen.

  • BasieP
  • Registratie: Oktober 2000
  • Laatst online: 19-10-2025
ik dacht dat je met png files wel transparantie per pixel kon instellen, ik weet het zeker zelfs

je kan dan dus echt 32 bit plaatjes maken, met daarin een alpha filter
het probleem is dat IE dit soort png files niet goed kan openen. maar in mozila werkt het bijvoorbeeld weer wel.

wanneer je site dynamisch is zou je de browser kunnen detecteren, en daaruit je code opbouwen, maar anders denk ik dat je een probleem heb

This message was sent on 100% recyclable electrons.

Pagina: 1