CSS transparenca za vse brskalnike – CSS Transparency for All Browsers

CSS Transparenca je ena tistih CSS lastnosti, ki potrebuje precej različnih vrednosti, da zanesljivo deluje v vseh brskalnikih. Za pokritje vseh brskalnikov potrebujemo precej CSS stilov, ki pa se sreči med seboj dobro razumejo.

Spodnji primer prikazuje CSS transparenco 50%.

.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;

/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);

/* Older than Firefox 0.9 */
-moz-opacity:0.5;

/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}

Kodo za CSS transparenco je Chris Coyier (CSS-Tricks) še nadgradil oziroma prečistil. Zadnja priporočena uporaba kode za CSS transparenco pa je sedaj spodnja.


.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}

CSS transparenca ima na pseudo classu :hover v starejših verzijah IE težave.

Vir: http://css-tricks.com/64-css-transparency-settings-for-all-broswers/

Komentiraj


*