Gennemsigtig i css

Tags:    html css

Hvordan er det egentlig man gør ting gennemsigtig i css? :P



9 svar postet i denne tråd vises herunder
4 indlæg har modtaget i alt 4 karma
Sorter efter stemmer Sorter efter dato
FILTER: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50)



filter: alpha(opacity=50);

--
Ronni Egeriis - squirrel development: http://sqdev.dk/



Hvordan er det egentlig man gør ting gennemsigtig i css? :P

hvis det skal være 100% gennemsigtigt skal der ikke være nogen baggrund. dvs. background: none; der skal helt lades være med at sætte en baggrund.

Hvis det skal være semitransparent er den mest almindelige metode at lave et gif billede hvor hver anden pixel er gennemsigtig og resten er en farve der ligger tæt på baggrunden.
f.eks http://www.meyerweb.com/eric/css/edge/complexspiral/halfscr-blue.gif

En ren css metode findes ikke på nuværende tidspunkt men er ved at blive implementeret i css3
http://www.w3.org/Talks/2003/0521-CSS-WWW2003/all.htm under color

Der er ikke andet at gøre end at vente....

[Redigeret d. 23/12-03 15:00:54 af Flemming Hoffmeyer]



Hvordan er det egentlig man gør ting gennemsigtig i css? :P


Du kan lave et halvgennemsigtig PNG billede.
PNG har en Alpha channel som gør det muligt at lave et billede på fx 1x1 px sort baggrund 50% gennemsigtigt. Billedet kan så bruges som baggrund, og denne vil så være 50% gennemsigtig :)
Dette virker dog kun i Mozilla og andre browsere der understøtter gennemsigtige png'er, det gør Internet Explorer ikke, endnu...

Der kan du dog gøre noget andet, med Internet Explorers filtre.
Eksempel:

<!-- style -->
<style type="text/css">
.bg {
background-image:url(bg.png);
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
.bg {
background-image:url(); filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png', sizingMethod='scale');
}
</style>
<![endif]-->
<!-- end style -->

Dette vil, i en internet explorer, version under 7, få png'n til at være gennemsigtig.

Du kan også bruge et javascript der gør alt arbejdet for dig, virker nok ikke på baggrunde.

http://aquaa.dk/new/includes/pngfix.js

Mvh Bob



background: transparent;




background: transparent;

hmmm


ikke noget med man kan gøre hvor mange % det skal være?



filter: alpha(opacity=50);

--
Ronni Egeriis - squirrel development: http://sqdev.dk/


Ja den er i og for sig god nok i IE men i mozilla, NS og Opera fungerer det ikke ... findes der ikke mulighed for transperant i dem ? eller er syntaxen bare anderledes ?

Mvh

Lars Axberg



Hvordan er det egentlig man gør ting gennemsigtig i css? :P



Du kan oxo bare bruge denne her :

Fold kodeboks ind/udKode 


Den virker oxo fint fint. :)

[Redigeret d. 26/06-04 10:18:18 af Lasse Jørgensen]



Jeg faldt lige over en lille ting som virker i Firefox...

Css:

<style type="text/css">
.transparent {
-moz-opacity: .87;
}
</style>

det giver en gennemsigtighed på 87%
Det kunne jo evt. kombineres med filter:alpha(opcatity=87);

:D



t