Archief - div achtergrondkleur transparant

D

Dj Aero

Legacy Member

• 12 dec 2009

• #1

Ik zou graag de achtergrond kleur van een div transparanter maken zodat je de onderliggende achtergrond afbeelding nog kunt zien. is dit mogelijk in css/xhtml of komt daar jquery of iets dergelijks aan te pas?

volgende code om een schets van de vraag te geven

<div id="contentcontainer">

<div class="contentpanel"></div>
<div class="contentpanel"></div>

</div>

ik heb dus een content container met een vaste breedte en hoogte. Deze heeft een achtergrondafbeelding. in deze contentcontainer komen verschillende contentpanels, met inhoud van bvb nieuws items enzo. Nu had ik graad die content panels een lichtgrijze achtergrond kleur gegeven, maar wel dat ze doorschijnen zodat de achtergrond afbeelding van de container nog zichtbaar is. is dat realiseerbaar met css en vooral strict?

S

Streetrunner

Legacy Member

• 13 dec 2009

• #2

De beste manier is om met een background-image te werken.
Je maakt in photoshop een bestandje aan, je geeft je laag/background een kleur en stelt de gewenste transparantie in. Zorg wel dat je bestand dezelfde breedte heeft als je contentcontainer.
Daarna knip je een reepje uit van deze achtergrond met dezelfde breedte als je bestand en de hoogte van 1px.

Op je contentcontainer zet je dan background-image: bestand.png
en de background-repeat zet je op repeat-y (in de hoogte dus).
Het is trouwens aangeraden niet met een vaste hoogte te werken ...

Belangrijk is ook dat je een .png bestand gebruikt want andere extenties ondersteunen geen transparante zaken !


PS: als je volledig flexibel wil zijn, maak dan een blokje van 1 op 1 px aan met de gewenste kleur en transparency en stel de background-repeat dan ook in op repeat-x samen met voorgaande instellingen.

D

Dj Aero

Legacy Member

• 13 dec 2009

• #3

op die manier werkt het niet in mijn geval streetrunner. ik zit met een vaste achtergrond afbeelding, een div met overflow:auto. dus het zijn enkel de inhoudpaneeltjes die scrollen, de achtergrond afbeelding blijft gewoon staan. een afbeelding uitknippen werkt dus ook niet.

is zo iets niet realiseerbaar in jquery dan?

ik krijg het nog maar pas op school dus weet er nog niet genoeg van

d

dJeez

Legacy Member

• 14 dec 2009

• #4

Streetrunner zei:

Belangrijk is ook dat je een .png bestand gebruikt want andere extenties ondersteunen geen transparante zaken !

Klik om te vergroten...

Een GIF kan ook transparantie aan, en wordt beter ondersteund (probeer maar eens een transparante PNG te gebruiken in IE6 zonder op CSS filters terug te vallen). Daarnaast kan je ook transparantie (of opacity) via CSS zelf instellen, een voorbeeld van hoe dat in zijn werk gaat kan je vinden op Pure CSS opacity and how to have opaque children, css, xhtml, Steven York.com. Dat lijkt mij te zijn wat de TS zoekt, op basis van zijn omschrijving.

a

adrianhates

Legacy Member

• 14 dec 2009

• #5

dJeez zei:

Een GIF kan ook transparantie aan, en wordt beter ondersteund (probeer maar eens een transparante PNG te gebruiken in IE6 zonder op CSS filters terug te vallen). Daarnaast kan je ook transparantie (of opacity) via CSS zelf instellen, een voorbeeld van hoe dat in zijn werk gaat kan je vinden op Pure CSS opacity and how to have opaque children, css, xhtml, Steven York.com. Dat lijkt mij te zijn wat de TS zoekt, op basis van zijn omschrijving.

Klik om te vergroten...

Opacity using images

However, it's far easier to handly opacity using images. The PNG image format can handle opacity (although remember PNG transparencies don't work under IE6 without hacks) so it's worth sticking with PNGs for now (although that's up to you). If you create a 1x1 PNG with the required transparency, you can use this as a background image on the container (as per the example that inherits the opacity) and it'll look exactly like the second example.

F

Fr3aK

Legacy Member

• 15 dec 2009

• #6

Wat adrianhates zei, met Windows 7 in aankomst zal IE6 wel snel verdwijnen, het aandeel dat ze nu nog hebben mag je (imo) verwaarlozen.

p

phil_r

Legacy Member

• 19 dec 2009

• #7

Ik zou de transparantie niet in HTML/CSS doen, verre van zelfs!
Je gaat last krijgen met heel wat comptabiliteits problemen en mss heb je het werkend gekregen voor alle browsers, tot dat er weer een nieuwe browser is...

Ik raad je aan om je foto zelf aan te passen, zet het doorzichtiger en bewaar het in PNG. Je hebt dan hetzelfde resultaat, of heb ik iets niet begrepen waarom je het in HTML wil doen?

EDIT: zie net dat adrianhates, dezelfde oplossing heeft, mja nu heb je het in het Nederlands

d

dJeez

Legacy Member

• 20 dec 2009

• #8

phil_r zei:

Ik raad je aan om je foto zelf aan te passen, zet het doorzichtiger en bewaar het in PNG. Je hebt dan hetzelfde resultaat

Klik om te vergroten...

Behalve in IE6, tenzij je daar via CSS filtering gaat... IE6 - hoe graag ik en iedereen het ook anders zou willen - is binnen een bedrijfscontext nog steeds niet weg te denken (en nog minder te negeren). Maar soit, je doet ermee wat je wil, beide oplossingen hebben hun problemen, beiden zijn op zichzelf ook geschikt om in pakweg 98% (niet wetenschappelijk onderbouwd, maar afgaande op ervaring ) van de gevallen te bekomen wat je wil.

p

phil_r

Legacy Member

• 20 dec 2009

• #9

dJeez dat is waar, ma uiteindelijk zijn de gebruikers van Internet Explorer het gewoon van websites in een mislukte weergave te zien, toch? We proberen alleen te redden wat te redden valt...

s

solidraven

Legacy Member

• 22 dec 2009

• #10

Als je nu nog steeds IE6 gebruikt verdien je het gewoon om websites slecht weergegeven te zien. En je kan nog altijd een link includen naar google chrome frame: Google Chrome Frame - Google Code

D

Drone

Legacy Member

• 22 dec 2009

• #11

solidraven zei:

Als je nu nog steeds IE6 gebruikt verdien je het gewoon om websites slecht weergegeven te zien. En je kan nog altijd een link includen naar google chrome frame: Google Chrome Frame - Google Code

Klik om te vergroten...

Ik denk niet dat er zoveel mensen IE6 gebruiken omdat ze dat echt willen.

b

brutal

Legacy Member

• 22 dec 2009

• #12

filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;

E

El Toro

Legacy Member

• 3 jan 2010

• #13

hey, ik zit met ongeveer dezelfde vraag en een klein extra probleempje.
Ik help mijn vriendin een site te maken, en het een fixed bg image waar daarna een tekstvak over moet komen. Nu heb ik dus de bg in de body gezet, en daarna op mijn wrap div een code gezet voor transparantie, en het werkt wel... ware het niet dat daardoor alle tekst ook transparant en dus onduidelijker wordt. mijn code voor transparantie is #wrap {
opacity:.50;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
background-color: #000;
}

iemand enige suggestie?