Transparante layer, zonder transparante tekst

[Lifelogger]

Hallo...

Kan iemand mij vertellen of het mogelijk is om een layer transparant te maken, zonder dat de tekst daarbinnen ook transparant is?

Ik ben al 2 dagen aan het zoeken en spelen met styles en CSS'en om de tekst in een transparante layer niet transparant te krijgen. Kan het alleen niet voor elkaar krijgen.

Heb er al gedacht om een layer er overheen te leggen, maar dat lukt niet i.v.m. met de opbouw van de site.

[posttoast]

Lifelogger schreef op vrijdag 03 december 2004 @ 09:45:
Hallo...

Kan iemand mij vertellen of het mogelijk is om een layer transparant te maken, zonder dat de tekst daarbinnen ook transparant is?

Ik ben al 2 dagen aan het zoeken en spelen met styles en CSS'en om de tekst in een transparante layer niet transparant te krijgen. Kan het alleen niet voor elkaar krijgen.

Heb er al gedacht om een layer er overheen te leggen, maar dat lukt niet i.v.m. met de opbouw van de site.

Als je transparant bedoelt als in semi-transparant dan kan het niet volgens mij. Een mogelijkheid is misschien om de tekst zowel in de layer met de transparante achtergrond als in de layer erboven te doen, al is dat verre van netjes natuurlijk...

[Lifelogger]

Ja... was er al bang voor dat dat niet ging lukken. Ben er al langere tijd naar op zoek en veel mensen gevonden met hetzelfde probleem en zonder oplossing. Jammer...

[Woudloper]

Door de achtergrond van je div een transparant plaatje mee te geven en gewoon de tekst middels css een andere kleur te geven...

[gitaarwerk]

layer over layer misschien?

[posttoast]

Woudloper schreef op vrijdag 03 december 2004 @ 09:54:
Door de achtergrond van je div een transparant plaatje mee te geven en gewoon de tekst middels css een andere kleur te geven...

Ja, of gewoon een PNG met alpha transparancy. Helaasch werkt dat (nog) niet in Internet Explorer.

[gitaarwerk]

Vincent Bovelander schreef op vrijdag 03 december 2004 @ 11:10:
[...]


Ja, of gewoon een PNG met alpha transparancy. Helaasch werkt dat (nog) niet in Internet Explorer.

ben benieuwd of dat in de volgende versie van IE wel komt. Daarbij is het nog niet erg handig om gaan te gebruiken, omdat zat mensen nog oude versies gebruiken. Erg jammer.. het zou voor designers een leuk speeltje extra zijn. Wordt even door internet explorer om zeep geholpen.

[Cubix]

Je zou een div een gif-achtergrond plaatje kunnen geven dat steeds 1 regel transparant is en dan weer 1 regel niet.
Als de kleuren niet te veel verschillen kan je het opaque effect toch krijgen, alleen wel een beetje kunstig...

[Verwijderd]

Cubix schreef op vrijdag 03 december 2004 @ 11:37:
Je zou een div een gif-achtergrond plaatje kunnen geven dat steeds 1 regel transparant is en dan weer 1 regel niet.
Als de kleuren niet te veel verschillen kan je het opaque effect toch krijgen, alleen wel een beetje kunstig...

Om en om een transparante en niet-tranparante pixel werkt beter. en dan niet een gifje van maar 2x2 gebruiken, maar iets groter. De browser hoeft dan het plaatje minder vaak zelf te herhalen, scheelt in de render-snelheid.

[edit]typos

[Verwijderd]

Cascading Stylesheet:

.Trans-1 {
    width:200px;
    filter:alpha(opacity=20);
    background:#F00;
    padding:10px;
}

.Trans-2 {
    filter:alpha(opacity=100);
    position:relative;
    color:#00F;
}

HTML:

<div class="Trans-1">
    <div class="Trans-2">
        Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
    </div>
</div>

Werkt niet in Mozilla.

[posttoast]

Verwijderd schreef op vrijdag 03 december 2004 @ 12:23:

Cascading Stylesheet:

.Trans-1 {
    width:200px;
    filter:alpha(opacity=20);
    background:#F00;
    padding:10px;
}

.Trans-2 {
    filter:alpha(opacity=100);
    position:relative;
    color:#00F;
}

HTML:

<div class="Trans-1">
    <div class="Trans-2">
        Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
    </div>
</div>

Werkt niet in Mozilla.

Klopt, transparantie werkt volgens het overerving-principe. Alles wat zich in (dus boven) het Trans-1 vlak bevindt wordt dus ook transparant.

[Blaise]

Vincent Bovelander schreef op vrijdag 03 december 2004 @ 11:10:
[...]


Ja, of gewoon een PNG met alpha transparancy. Helaasch werkt dat (nog) niet in Internet Explorer.

Tenzij je bereid bent om activeX toe te passen. Kan ook bij background-PNGs. Maakt je pagina wel wat trager in IE.

[Genoil]

Blaise schreef op vrijdag 03 december 2004 @ 16:59:
[...]
Tenzij je bereid bent om activeX toe te passen. Kan ook bij background-PNGs. Maakt je pagina wel wat trager in IE.

opmerking: die ie-png hack werkt op zich wel, maar niet zo goed voor achtergronden die moeten tilen (repeat-x en/of repeat-y) en waarvan de tile-grootte in de tile-richting groter is dan 1px. dit omdat de IE ImageAlphaLoader o.i.d. niet kan tilen maar alleen stretchen en croppen.

Maar in dit geval zou je met png van 1 * 1 een heel eind kunnen komen. je moet dan wel de "grijze-flits" (hoe je png eruit ziet voordat de hack is toepgepast) in IE voor lief nemen.

[posttoast]

Genoil schreef op vrijdag 03 december 2004 @ 17:13:
[...]


opmerking: die ie-png hack werkt op zich wel, maar niet zo goed voor achtergronden die moeten tilen (repeat-x en/of repeat-y) en waarvan de tile-grootte in de tile-richting groter is dan 1px. dit omdat de IE ImageAlphaLoader o.i.d. niet kan tilen maar alleen stretchen en croppen.

Maar in dit geval zou je met png van 1 * 1 een heel eind kunnen komen. je moet dan wel de "grijze-flits" (hoe je png eruit ziet voordat de hack is toepgepast) in IE voor lief nemen.

Ja, en alle bezoekers met XP SP2 krijgen iedere keer dat ze je site bezoeken een ActiveX waarschuwing.

[Verwijderd]

Volgens mij heb ik wel eens iets toegepast als:

HTML:

<div id="container" style="position:relative;">
  <div id="background" style="position:absolute;alpha(opacity=10);background-color:#FFF;"></div>
  <div id="content" style="position:absolute;color:#000;">tekst</div>
</div>

Uiteraard met mozilla-variant van alpha en styles in stylesheet maar het gaat om het idee.

[ Voor 18% gewijzigd door Verwijderd op 03-12-2004 18:30 ]

[Verwijderd]

En hoe laat je de background met de content meegroeien?

[Verwijderd]

Verwijderd schreef op vrijdag 03 december 2004 @ 18:39:
En hoe laat je de background met de content meegroeien?

niet

Da's idd wel lastig. Waar ik het gebruikte ging het om een afgebakend vlak met een stuk tekst er in. De hoogte stond dus vast.

Daarbij was ook wel tricky dat het ging om een 10% wit vlak op een donkere achtergrondkleur met daarin witte tekst. Dus er stonden 2 div's over elkaar, de bovenste een donkere kleur met alpha=0 zodat ie onzichtbaar is in browsers die transparancy ondersteunen maar dus voorkomt dat je wit op wit krijgt in browsers die transparency niet ondersteunen.

Maar dat terzijde...