@codenerd på twitter Mit seneste tweet:

CSS: gennemsigtige baggrunde

En af de ting der er blevet mere og mere populære i den senere tid er halvgennemsigtige baggrunde. Dette er faktisk utroligt nemt at gå til med CSS, omend man lige skal være opmærksom på, at den CSS man skriver ikke er 100% valid i henhold til W3C. Når det er sagt giver det jo en fed effekt, så lad os se på sagerne.

Gennemsigtighed er indført i CSS3 med standard propertyen opacity. Dette understøttes desværre ikke i alle browsere (kun firefox, opera og safari) så derfor er det nødvendigt med minimum tre forskellige metoder:

  • Firefox (over 1.6), Safari og Opera (8) holder sig til standarden, så her kan opacity anvendes fx (opacity: 0.5 – vil give 50% gennemsigtighed)
  • Firefox (under v1.6) bruger -moz-opacity: 0.5;
  • Internet Explorer bruger selvfølgelig sine indbyggede filtre (yay) filter:alpha(opacity=50);

Altså kan det se ud som nedenstående hvis vi ønsker at gøre et div gennemsigtigt

PHP
1
2
3
4
5
6
#alphaDiv {
    background: #CCC;
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

Dette vil gøre alphaDiv gennemsigtigt, men der er problemer med ovenstående. Disse afspejles nemt i mit første eksempel, hvor det er tydeligt at se alle elementer inde i DIVet også bliver gennemsigtige. Dette skyldes at alle elementer nedarver gennemsigtigheden fra opacity og -moz-opacity, og det er ikke noget man lige umiddelbart kan ændre på (nej man kan ikke bare sætte opacity til 1 på de underlæggende elementer). I IE kan problemet fixes ved at positionere DIVet relativt (position:relative), men det er der jo ikke meget Cross Browser over. Løsningen er at lægge et baggrunds DIV ind i hoveddivet, og på den måde undgå at sætte opacity på det omkredsene DIV.

Nedenstående kode er brugt i eksempel to, hvor det ses, at der ikke nedarves gennemsigtighed:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#alphaDiv {
    overflow:hidden;
    height:140px;
    width:325px;
    border: 1px solid #000;
    color:#FF0000;
    font-size:2em;
}
#alphaDiv .bg {
    background: #CCC;
    filter:alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
    height:140px;
    width:325px;
    position:absolute;
    z-index:-1;
}

HTML

PHP
1
2
3
<div id="alphaDiv">
    <div class="bg">&nbsp;</div>
</div>

Her positioneres .bg DIV absolut og gives z-index:-1; hvilket placerer det bag alle andre elementer i #alphadiv. Det eneste man skal huske her er, at sætte overflow:hidden (virker også med scroll eller auto, men ikke med visible af en eller anden grund). Derudover, hvis man ved der skal være Scrollbars på DIVet er det en god ide at sætte bredden på .bg til 20px mindre end #alphaDiv idet scrollbaren ellers bliver inaktiv i Firefox

Om der er smartere måder at gøre det på, ved jeg ikke, men ovenstående er den eneste brugbare jeg er kommet frem til

Skriv en kommentar

Krævede felter er markeret med *.

*