Achtergrondafbeeling transparantie en tekst in div...

[Verwijderd]

Ik wil graag de achtergrond van een div-element transparant maken. Niet de inhoud van de div dus.

(ZONDER het gebruik transparante .png afbeeldingen!!)

Wat ik nu de hele tijd doe is het volgende:

Ik wijs een achtergrondplaatje toe aan een div.
Vervolgens geef ik een opacity: 0.8 als stijl-eigenschap mee.

#header{
background: url(header_background.jpg) top center;
opacity: 0.8;
color: white;
}

Nadeel van deze methode is dat de gehele inhoud van de div transparant wordt, dus ook bijvoorbeeld alle tekst-elementen in de div

Ik zou graag zoiets willen krijgen:

#header{
background: url(header_background.jpg) opacity: 0.8 top center;
color: white;
}

Maar dit werkt dus niet...

Nogmaals, ik wil dit graag bereiken zonder het gebruik van transparante png's.

Zijn hier mogelijkheden voor?

[RobIII]

Verwijderd schreef op woensdag 29 september 2010 @ 01:15:
Zijn hier mogelijkheden voor?

Gebruik rgba notatie voor je background property; werkt echter alleen in fatsoenlijke browsers.

Edit: En waarom vind ik dat in 3 seconden googlen? Je kunt er haast niet omheen zelfs! Ik vraag me dan echt af hoe je gezocht hebt... Je zult toch voor een fatsoenlijke fallback (althans, voor IE7 en 8 ) naar PNG's moeten. Verder wil ik je graag wijzen op code tags (en dat is vast niet voor 't eerst dat we dat moeten doen) en op onze Quickstart want als je die (goed) had gehanteerd bij het openen van dit topic dan had het topic waarschijnlijk niet eens bestaan en anders wel in hele andere vorm.

[ Voor 87% gewijzigd door RobIII op 29-09-2010 01:39 ]

[TheDane]

Nooit getest, maar div met absolute positionering, 80% opacity, en daaroverheen, ook absolute position een div met transparante achtergrond?

offtopic:
Waarom eigenlijk geen transparante png?

[Verwijderd]

div maken met transparente achtergrond dan in de andere div de content. Op de content div dan margin-top : 'achtergrondDiv groote' px; Dan wordt het er gewoon overgeplaats. Natuurlijk mag de content div dan enkel als bg color transparent hebben

[MoietyMe]

Ik gebruik altijd rgba() voor degelijke browsers met fallback naar een .png voor minder degelijke browsers.

[crisp]

Voor IE kan je eventueel nog een gradient-filter gebruiken om hetzelfde effect te bereiken als met rgba(); enige nadeel is dat cleartype dan wordt uitgeschakelt.

[MueR]

TheDane schreef op woensdag 29 september 2010 @ 01:25:

offtopic:
Waarom eigenlijk geen transparante png?

Als ik een gok moet doen.. Het gaat om de header, dus wil hij de achtergrond van de pagina net door de header heen hebben. Bij een beetje header van zeg 1000x150 heb je dan al snel een grote png. Waarom hij vervolgens niet op het idee komt om die transparantie te faken in de jpg is me eigenlijk een raadsel

[Bosmonster]

Omdat je dan al je flexibiliteit en beheerbaarheid inlevert waarschijnlijk.

Maar goed, het is vrij makkelijk te doen door de header position relative te geven en daarin de image en content over elkaar heen te plaatsen. Dan kun je de image transparant maken zonder dat het invloed heeft op de content.

[RobIII]

Bosmonster schreef op woensdag 29 september 2010 @ 12:17:
Omdat je dan al je flexibiliteit en beheerbaarheid inlevert waarschijnlijk.

MueR schreef op woensdag 29 september 2010 @ 10:45:
Bij een beetje header van zeg 1000x150 heb je dan al snel een grote png.

Dat is natuurlijk ook helemaal afhankelijk van waarvoor je het gebruikt. Als je het (bijv) alleen voor rounded corners gebruikt en/of een egale achtergrond hebt dan compressed zo'n PNG ook als een dolle natuurlijk. Deze 1000x150 png is 1.476 bytes (<2 Kb).

[ Voor 30% gewijzigd door RobIII op 29-09-2010 12:40 ]

[dB90]

crisp schreef op woensdag 29 september 2010 @ 09:46:
Voor IE kan je eventueel nog een gradient-filter gebruiken om hetzelfde effect te bereiken als met rgba(); enige nadeel is dat cleartype dan wordt uitgeschakelt.

Dat is wel weer te fixen, laatst zelf ook moeten gebruiken...

[MueR]

RobIII schreef op woensdag 29 september 2010 @ 12:35:
Dat is natuurlijk ook helemaal afhankelijk van waarvoor je het gebruikt. Als je het (bijv) alleen voor rounded corners gebruikt en/of een egale achtergrond hebt dan

Gebruik je border-radius en een kleine repeating png

[Verwijderd]

Google is je beste vriend: hit 1 hier met link naar live werkend voorbeeld hier.

[RobIII]

MueR schreef op woensdag 29 september 2010 @ 13:54:
[...]

Gebruik je border-radius

Als die nou overal eens ondersteund werd

[Bosmonster]

RobIII schreef op woensdag 29 september 2010 @ 14:10:
[...]

Als die nou overal eens ondersteund werd

Boeien. Dat noemen we progressive enhancement

Gebruik ook steeds meer CSS3 voor extra effecten als schaduwen en ronde hoekjes. IE gebruikers hebben dan maar iets minder visueel geweld.

[RobIII]

Bosmonster schreef op woensdag 29 september 2010 @ 14:16:
[...]


Boeien. Dat noemen we progressive enhancement

Gebruik ook steeds meer CSS3 voor extra effecten als schaduwen en ronde hoekjes. IE gebruikers hebben dan maar iets minder visueel geweld.

Oh, maar dat ben ik wel met je eens maar we gaan offtopic...