Toon posts:

Achtergrondafbeeling transparantie en tekst in div...

Pagina: 1
Acties:

Onderwerpen


  • TR06
  • Registratie: april 2006
  • Laatst online: 19-06-2019
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
  • Registratie: december 2001
  • Nu online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

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]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij


  • TheDane
  • Registratie: oktober 2000
  • Laatst online: 21-09 14:44

TheDane

1.618

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?

  • lvanbreda
  • Registratie: september 2010
  • Laatst online: 18-12-2011
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
  • Registratie: juli 2003
  • Laatst online: 21-09 10:12

MoietyMe

zij/haar

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

  • crisp
  • Registratie: februari 2000
  • Nu online

crisp

Devver

Pixelated

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.

Intentionally left blank


  • MueR
  • Registratie: januari 2004
  • Laatst online: 24-09 17:44

MueR

Moderator Devschuur®

is niet lief

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 :P

Anyone who gets in between me and my morning coffee should be insecure.
Breng nu uw applicatie naar de kloot. Dat is veel beter! Nu samen met klootopslag. Voor maar €9,95. Doei doei!


  • Bosmonster
  • Registratie: juni 2001
  • Laatst online: 10-09 22:52
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
  • Registratie: december 2001
  • Nu online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Bosmonster schreef op woensdag 29 september 2010 @ 12:17:
Omdat je dan al je flexibiliteit en beheerbaarheid inlevert waarschijnlijk.
:Y
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]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij


  • dB90
  • Registratie: oktober 2004
  • Laatst online: 18-08 14:59
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... }:O

Webberry Webdevelopment


  • MueR
  • Registratie: januari 2004
  • Laatst online: 24-09 17:44

MueR

Moderator Devschuur®

is niet lief

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 ;)

Anyone who gets in between me and my morning coffee should be insecure.
Breng nu uw applicatie naar de kloot. Dat is veel beter! Nu samen met klootopslag. Voor maar €9,95. Doei doei!


  • shishdem
  • Registratie: november 2009
  • Laatst online: 16-10-2013
Google is je beste vriend: hit 1 hier met link naar live werkend voorbeeld hier.

"A fanatic is one who redoubles his effort when he has forgotten his aim." - George Santayana


  • RobIII
  • Registratie: december 2001
  • Nu online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Als die nou overal eens ondersteund werd ;)

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij


  • Bosmonster
  • Registratie: juni 2001
  • Laatst online: 10-09 22:52
RobIII schreef op woensdag 29 september 2010 @ 14:10:
[...]

Als die nou overal eens ondersteund werd ;)
Boeien. Dat noemen we progressive enhancement :P

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

  • RobIII
  • Registratie: december 2001
  • Nu online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

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


Boeien. Dat noemen we progressive enhancement :P

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...

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij

Pagina: 1


Nintendo Switch (OLED model) Apple iPhone 13 LG G1 Google Pixel 6 Call of Duty: Vanguard Samsung Galaxy S21 5G Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True

Tweakers maakt gebruik van cookies

Bij het bezoeken van het forum plaatst Tweakers alleen functionele en analytische cookies voor optimalisatie en analyse om de website-ervaring te verbeteren. Op het forum worden geen trackingcookies geplaatst. Voor het bekijken van video's en grafieken van derden vragen we je toestemming, we gebruiken daarvoor externe tooling die mogelijk cookies kunnen plaatsen.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Forum cookie-instellingen

Bekijk de onderstaande instellingen en maak je keuze. Meer informatie vind je in ons cookiebeleid.

Functionele en analytische cookies

Deze cookies helpen de website zijn functies uit te voeren en zijn verplicht. Meer details

janee

    Cookies van derden

    Deze cookies kunnen geplaatst worden door derde partijen via ingesloten content en om de gebruikerservaring van de website te verbeteren. Meer details

    janee