[html/css] Transparantie

[nemesis_]

ik heb een pagina met een achtergrond waarop de tekst staat.

om de tekst leesbaar te houden staat die tekst in een kader, maar daar laat ik m'n achtergrond voor 25% doorheen schijnen. dit werkt wel.

maar, nu staan er weer plaatjes (en natuurlijk de tekst) in die kaders en die inhoud wordt ook maar voor 75% zichtbaar. ik wil dat deze voor 100% zichtbaar zijn, zodat de achtergrond alleen door het kader heen "schijnt", ipv ook door m'n inhoud.

de site is zo opgebouwd:

div(achtergrond) table div table div(het 75% zichtbare kader) div(centreer div) table div(voor de echte inhoud, a en img bijvoorbeeld)

Cascading Stylesheet:

.maindiv { /* zo heet de achtergrond div */
    background  : url("../images/waterfallbg.jpg") no-repeat fixed center 0px;
}
.alinea { /* het doorzichtige kader */
    border              : 1px solid #000000;
    z-index             : 10;
    position            : relative;
    -moz-opacity        : 0.75;
    filter              : alpha(opacity=75);
    opacity             : 0.75;
    background-color    : #ffffff;
    padding-bottom      : 3px;
}

wat moet er nog bij, zodat de inhoud in .alinea niet 75% zichtbaar is, maar gewoon 100%?

[ Voor 3% gewijzigd door nemesis_ op 29-07-2004 14:38 ]

[André]

[css] = [code=css]

Misschien .alinea * { -moz-opacity: 1; filter : alpha(opacity=100); }

Als ik me het goed kan herinneren werkt dit niet. De enige manier is om op het plaatje zelf de opacity te zetten.

[ Voor 40% gewijzigd door André op 29-07-2004 14:28 ]

[nemesis_]

André schreef op 29 juli 2004 @ 14:21:
[css] = [code=css]

Misschien .alinea * { -moz-opacity: 1; filter : alpha(opacity=100); }

dat werkt idd niet, maar wat bedoel je met opacity alleen op het plaatje?

img {
filter: blabla
}

[Verwijderd]

'opacity' werkt in Mozilla en ook in Safari. (Eerder waren dat respectievelijk '-moz-opacity' en '-khtml-opacity'.)

[nemesis_]

Verwijderd schreef op 29 juli 2004 @ 14:54:
'opacity' werkt in Mozilla en ook in Safari. (Eerder waren dat respectievelijk '-moz-opacity' en '-khtml-opacity'.)

ok, maar dat is nog niet het antwoord

[Verwijderd]

Heb je een voorbeeldje?

[nemesis_]

Verwijderd schreef op 30 juli 2004 @ 12:08:
Heb je een voorbeeldje?

zo ziet het er nu uit (klik) het gaat om het rechter kader, met die twee thumbnails erin

het kader dus doorzichtig, en de plaatjes zouden niet doorzichtig moeten worden

[ Voor 14% gewijzigd door nemesis_ op 30-07-2004 14:10 ]

[Verwijderd]

Voorbeeldje bij een vrage over code impliceert meestal de vraag naar een code voorbeeldje (online). In dit geval ook. Eventueel zou:

code:

img{opacity:1}

... kunnen werken, maar ik vrees van niet.

[nemesis_]

ja, sorry ik was er niet helemaal bij denk ik

voorbeeldje

[Verwijderd]

en als je een nieuwe div gebruikt voor de tekst, die je in je bestaande divs plaatst, maar dan met achtergrond transperant?

Dus:

code:

<div>
<!-- hier laat je de achtergrond 25% doorschijnen -->
  <div>
    <!-- hier plaats je je content, zonder background of background transperant -->
  </div>
</div>

[McVirusS]

Verwijderd schreef op 30 juli 2004 @ 16:21:
en als je een nieuwe div gebruikt voor de tekst, die je in je bestaande divs plaatst, maar dan met achtergrond transperant?

Dus:

code:

<div>
<!-- hier laat je de achtergrond 25% doorschijnen -->
  <div>
    <!-- hier plaats je je content, zonder background of background transperant -->
  </div>
</div>

Volgens mij doet dat transparency aan overerving en heeft dit dus geen nut .

[André]

En als je de tekst nu met een layer - die absoluut gepositioneerd is - er overheen plaatst? werkt dat wel, want dan omzeil je de overerving.

[OVERLORD_1982]

Kan je die plaatjes gewoon niet in een andere layer zetten???

André was me voor

[ Voor 19% gewijzigd door OVERLORD_1982 op 30-07-2004 16:36 ]

[Verwijderd]

Volgens mij doet dat transparency aan overerving en heeft dit dus geen nut .

De manier waarop 'opacity' werkt ('-moz-opacity' in oudere builds verschilde hiervan) is dat het op het element en alles wat daar op ligt toegepast wordt.

[nemesis_]

André schreef op 30 juli 2004 @ 16:31:
En als je de tekst nu met een layer - die absoluut gepositioneerd is - er overheen plaatst? werkt dat wel, want dan omzeil je de overerving.

dat wil niet, want dan wordt het kader niet meer (goed) meegerekt

[bRight]

Misschien zowel de transparante layer als contentlayer in een container div gooien?

[nemesis_]

bRight schreef op 31 juli 2004 @ 12:59:
Misschien zowel de transparante layer als contentlayer in een container div gooien?

en dan die layers los van elkaar zetten, dus niet de contentlayer in de trans. layer?
ze staan namelijk wel in een container, maar dan een div in een div

[nemesis_]

de enige manier die ik nu heb gevonden om de content 100% zichtbaar te krijgen is, om die content div buiten de trans. div te zetten.
maar dit wil niet qua layout, want dan wordt het trans. kader niet meer meegerekt en valt (bijna) alle content erbuiten.

een vaste grootte van het kader wil ik ook niet

[Blaise]

Alternatief:

Je kan een 24bits PNG plaatje als achtergrond gebruiken; dus een volledig witte (deels) transparante PNG en die als tile gebruiken. Vervolgens een behaviour gebruiken om het ook werkend te krijgen in Internet Explorer.

[ Voor 7% gewijzigd door Blaise op 31-07-2004 18:12 ]

[bRight]

ook dan hou je het probleem met dat rekbare kader.. denk niet dat dat zo op te lossen is..

[nemesis_]

Blaise schreef op 31 juli 2004 @ 18:09:
Alternatief:

Je kan een 24bits PNG plaatje als achtergrond gebruiken; dus een volledig witte (deels) transparante PNG en die als tile gebruiken. Vervolgens een behaviour gebruiken om het ook werkend te krijgen in Internet Explorer.

bij de nieuwste browsers zou dit inderdaad wel lukken denk ik, maar ik weet dat het niet werkt bij bijvoorbeeld IE5(.5)

ook dan hou je het probleem met dat rekbare kader.. denk niet dat dat zo op te lossen is..

je kan het plaatje toch gewoon 100% van de hoogte van de inhoud geven? denk dat dat wel lukt

[ Voor 3% gewijzigd door nemesis_ op 01-08-2004 15:19 ]

[nemesis_]

Blaise schreef op 31 juli 2004 @ 18:09:
Alternatief:

Je kan een 24bits PNG plaatje als achtergrond gebruiken; dus een volledig witte (deels) transparante PNG en die als tile gebruiken. Vervolgens een behaviour gebruiken om het ook werkend te krijgen in Internet Explorer.

heb jij (zo ja, hoe) die behavior werkend voor een transparante png als achtergrond?

[nemesis_]

edit:

laat maar

[ Voor 83% gewijzigd door nemesis_ op 02-08-2004 13:50 ]

[nemesis_]

ik heb nu gewoon 2 versies, 1 voor NS en 1 voor IE

voor NS gewoon een trans PNG als achtergrond
voor IE:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/trans.png',sizingMethod='scale');

[ Voor 9% gewijzigd door nemesis_ op 02-08-2004 13:50 ]

[nemesis_]

lastig die verschillende knoppen!

[bRight]

nemesis_ schreef op 01 augustus 2004 @ 12:07:

je kan het plaatje toch gewoon 100% van de hoogte van de inhoud geven? denk dat dat wel lukt

Dat wel.. maar dan is je kader niet transparant
excuses voor de late reactie btw..