Hallo,

Ik ben bezig met een website om een content box transparant te maken, dit is me gelukt maar nu is alles wat in die box staat ook transparant.

Ik maak gebruik van 2 divs in de css

#content (Transparant)
#main (niet transparant)

In de main div staat niet in dat deze transparant moet zijn maar doet dit toch, zie hieronder de code:

PHP Code:

#content{ background:#fff; opacity: 0.90; filter:alpha(opacity=90); border:1px solid #ccc; padding:0; border-radius:6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; box-shadow: 0px 2px 5px rgba(0,0,0,.1); -moz-box-shadow: 0px 2px 5px rgba(0,0,0,.1); -webkit-box-shadow: 0px 2px 5px rgba(0,0,0,.1); } 


PHP Code:

#main { padding:40px 50px; } 


Website: http://bit.ly/rZE1hr

Na 100 keer geprobeerd te hebben heb ik de hoop op gegeven, ik hoop dat iemand hier op SD me helpen kan.

Wie o wie kan me hiermee helpen?

De 'opacity' parameter maakt de volledige box semi-transparant. Je kunt deze box dan voor je achtergrond gebruiken, en een andere div er bovenop voor je tekst. Je main div is transparant omdat je gewoon geen background hebt gedefinieerd.

Origineel gepost door Sabra Issa

De 'opacity' parameter maakt de volledige box semi-transparant. Je kunt deze box dan voor je achtergrond gebruiken, en een andere div er bovenop voor je tekst. Je main div is transparant omdat je gewoon geen background hebt gedefinieerd.

Snap het niet, dit zijn toch 2 verschillende divs en de #main komt na de #content div. Als ik de #main div een background mee geef dan klopt dit toch niet meer?

Origineel gepost door Ron Leder

Hallo,

Ik ben bezig met een website om een content box transparant te maken, dit is me gelukt maar nu is alles wat in die box staat ook transparant.

Ik maak gebruik van 2 divs in de css

#content (Transparant)
#main (niet transparant)

In de main div staat niet in dat deze transparant moet zijn maar doet dit toch, zie hieronder de code:

PHP Code:

#content{ background:#fff; opacity: 0.90; filter:alpha(opacity=90); border:1px solid #ccc; padding:0; border-radius:6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; box-shadow: 0px 2px 5px rgba(0,0,0,.1); -moz-box-shadow: 0px 2px 5px rgba(0,0,0,.1); -webkit-box-shadow: 0px 2px 5px rgba(0,0,0,.1); } 


PHP Code:

#main { padding:40px 50px; } 


Website: http://bit.ly/rZE1hr

Na 100 keer geprobeerd te hebben heb ik de hoop op gegeven, ik hoop dat iemand hier op SD me helpen kan.

Wie o wie kan me hiermee helpen?

Ik begrijp dat je een transparante rand om je content heen wilt?

Het probleem is nu dat de div #main geen achtergrondkleur heeft en automatisch dus ook volledig transparant is qua achtergrond. Verder heb je op #main een padding gezet, en de padding krijgt dezelfde achtergrondkleur als het element waarop je die padding definieert. Kortom: verander de padding in margin, geef de #main div een achtergrondkleur en that's it.

Overigens zou ik rgba gebruiken, dus in dit geval rgba(255,255,255,0.9)

Origineel gepost door Marco Slooten

Ik begrijp dat je een transparante rand om je content heen wilt?

Het probleem is nu dat de div #main geen achtergrondkleur heeft en automatisch dus ook volledig transparant is qua achtergrond. Verder heb je op #main een padding gezet, en de padding krijgt dezelfde achtergrondkleur als het element waarop je die padding definieert. Kortom: verander de padding in margin, geef de #main div een achtergrondkleur en that's it.

Overigens zou ik rgba gebruiken, dus in dit geval rgba(255,255,255,0.9)

Ik heb van main het volgende gemaakt maar blijft helaas nog hetzelfde

PHP Code:

#main { margin:40px 50px; rgba(255,255,255,0.9); } 


Ik bedoelde dat je de opacity in de #content div kunt vervangen door rgba, want opacity beinvloed ook de onderliggende elementen. Dus als je op #content een opacity zet, werkt dat door in #main. De beste manier om hier omheen te werken is dus om geen opacity te gebruiken, maar rgba.

Leesvoer over opacity: http://deepubalan.com/blog/2010/03/2...nce-explained/

Origineel gepost door Marco Slooten

Ik bedoelde dat je de opacity in de #content div kunt vervangen door rgba, want opacity beinvloed ook de onderliggende elementen. Dus als je op #content een opacity zet, werkt dat door in #main. De beste manier om hier omheen te werken is dus om geen opacity te gebruiken, maar rgba.

Leesvoer over opacity: http://deepubalan.com/blog/2010/03/2...nce-explained/

Pfff, @#$#! nog steeds niet.... :(

Je hebt de box-shadow rgba gemaakt, maar wat je wilt doen is dus het volgende:

Code:

#content { background: rgba(255,255,255,0.9); }
#main { background: white; }

Werkt overigens niet in IE, daarvoor zijn er wel fallbacks (CSS-Tricks over rgba)

Origineel gepost door Marco Slooten

Je hebt de box-shadow rgba gemaakt, maar wat je wilt doen is dus het volgende:

Code:

#content { background: rgba(255,255,255,0.9); }
#main { background: white; }

Werkt overigens niet in IE, daarvoor zijn er wel fallbacks met o.a. de -ms-filter-property.

Super!! Het is gelukt, thnx a million times, interesse in een gratis domeintje? ;-)

Btw, kan ik de transparante achtergrond nog ietsjes lichter maken?

Origineel gepost door Ron Leder

Super!! Het is gelukt, thnx a million times, interesse in een gratis domeintje? ;-)

Btw, kan ik de transparante achtergrond nog ietsjes lichter maken?

No problem!

RGBa is eigenlijk heel simpel RGB (rood, groen, blauw) met een alpha-channel welke de transparantie bepaalt. Dus in het geval van:

Code:

#div { background: rgba(255,255,255,0.9); }

betekent dat dat je 100% rood hebt, 100% groen en 100% blauw (samen wit) en de 0.9 geeft aan dat die achtergrond voor 90% zichtbaar is. 0.5 is voor de helft en 0 is volledig transparant.

Succes!

@Marco: Nice, was hiervan niet op de hoogte! Weten we dat ook weer :)