CSS (css opacity, javascript opacity) W3C CSS3 opacity .


   www.romver.ru
/ / CSS



( )

aatrn ghjphfxyjcnb - 'nj ntvf lfyyjq cnfnmb. ckb dfv bynthtcyj epyfnm, rfr cltkfnm 'ktvtyns html-cnhfybws ghjphfxysvb, bcgjkmpez CSS bkb Javascript, b rfr lj,bnmcz rhjcc-,hfepthyjcnb (jlbyfrjdjq hf,jns d hfpys[ ,hfepthf[) c extnjv ,hfepthjd Firefox, Internet Explorer, Opera, Safari, Konqueror, njulf vbkjcnb ghjcbv. lj,fdjr hfccvjnhbv ujnjdjt htitybt gjcntgtyyjuj bpvtytybz ghjphfxyjcnb c gjvjom. javascript.

CSS opacity (CSS ghjphfxyjcnm)

W3C d cdjtq htrjvtylfwbb CSS3 jghtltkztn cdjqcndj opacity lkz ghbvtytybz 'aatrnf ghjphfxyjcnb r 'ktvtynfv cnhfybws. yfxtybtv lfyyjuj cdjqcndf zdkztncz xbckj d lbfgfpjyt jn 0.0 lj 1.0. hb pyfxtybb hfdyjv yek. 'ktvtyn cnfyjdbncz gjkyjcnm. ghjphfxysv, f ghb pyfxtybb hfdyjv tlbybwt, cjjndtncndtyyj, cjdctv yt ghjphfxysv. djqcndj vj;yj ghbvtyznm r k.,sv 'ktvtynfv cnhfybws.

hbvth (pflfyf ghjphfxyjcnm 0.2, 0.5 b 1.0):

.img1 { opacity: 0.2; }
.img2 { opacity: 0.5; }
.img3 { opacity: 1.0; } /* jcktlytt ghfdbkj vj;yj yt erfpsdfnm, n.r. gj evjkxfyb. 'ktvtyn b nfr gjkyjcnm. dblty. */
CSS opacity - CSS ghjphfxyjcnm = 0.2CSS opacity - CSS ghjphfxyjcnm = 0.5CSS opacity - CSS ghjphfxyjcnm = 1.0

hfdbncz? f? fr xnj cfvjt dhtvz gjlgjhnbnm yfcnhjtybt. jyznyjt ltkj, xnj hfpyst ,hfepths gj-hfpyjve htfkbpe.n lfyyjt cdjqcndj: rnj djj,ot yt htfkbpetn, rnj htfkbpetn, bcgjkmpez cdjt cj,cndtyyjt yfpdfybt lkz lfyyjuj cdjqcndf, f rnj abkmnhs bcgjkmpetn.

hfepths gjllth;bdf.obt CSS3 opacity

jybvf.n CSS3 cdjqcndj opacity cktle.obt ,hfepths: Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9.

kz ecnfyjdrb ghjphfxyjcnb xthtp crhbgn bcgjkmpetv: object.style.opacity

Mozilla 1.6 b yb;t, Firefox 0.8

nfhst Mozilla b Firefox 0.8 bcgjkmpe.n cdj yfpdfybt lfyyjuj cdjqcndf: -moz-opacity

kz ecnfyjdrb ghjphfxyjcnb xthtp crhbgn bcgjkmpetv: object.style.MozOpacity

Safari 1.1, Konqueror 3.1

fyyst njdfhbob, gjcnhjtyyst yf ldb;rt KHTML, bcgjkmpe.n lkz eghfdktybz ghjphfxyjcnm. cdjqcndj: -khtml-opacity

kz ecnfyjdrb ghjphfxyjcnb xthtp crhbgn bcgjkmpetv: object.style.KhtmlOpacity

lyfrj, bvtqnt ddble, xnj lfyyjt cdjqcndj ljcnegyj kbim d lfyys[ dthcbz[ 'nb[ ,hfepthjd. Safari c dthcbb 1.2 bcgjkmpetn CSS3 opacity, yj ghb 'njv Konqueror cnfhit dthcbb 3.1, gthtcnfd gjllth;bdfnm -khtml-opacity, yt ddtk gjllth;re CSS3 opacity.

zydfht 2003 ujlf rjhgjhfwbz Apple ghtlcnfdbkf yjdsq ,hfepth lkz Mac OS X, jcyjdfyysq yf ldb;rt KHTML, Safari. kfujlfhz kbwtypbb, yf eckjdbz[ rjnjhjq hfcghjcnhfyztncz KHTML, dct bpvtytybz, dyjcbvst d ytuj hfphf,jnxbrfvb Apple, ge,kbre.ncz d dblt gfnxtq, rjnjhst, gjckt gthtcvjnhf, lj,fdkz.ncz d jcyjdye. dtnre KHTML.

hbxbyjq gj rjnjhjq Konqueror enhfnbk djpvj;yjcnm htfkbpfwbb 'aatrnf ghjphfxyjcnb rfr hfp b pfrk.xftncz dj dytctybt d zlhj KHTML gfnxtq jn Safari, n.r. Safari bcgjkmpetn djpvj;yjcnb ghbcencnde.obt d Mac OS X, yj rjnjhs[ ytn d KDE.

jytxyj hfyj bkb gjplyj 'nf cbnefwbz ,eltn bcghfdktyf, yj yf lfyysq vjvtyn d gjcktlytq dthcbb 3.5 cbnefwbz jcnftncz ght;ytq.

Internet Explorer 5.5+

fyysq ,hfepth, yfxbyfz c dthcbb 5.5 b drk.xfz gjcktly.. yf ctujlyziybq ltym dthcb. Internet Explorer 7, htfkbpetn ghjphfxyjcnm xthtp Alpha DirectX abkmnh. njbn jnvtnbnm, xnj lfyysq abkmnh bcgjkmpetn pyfxtybt ghjphfxyjcnb d lbfgfpjyt jn 0 lj 100 (f yt jn 0.0 lj 1.0). fr ;t jnvtxe, xnj abkmnh vj;yj ghbvtyznm kbim r 'ktvtyne c ecnfyjdktyysv cdjqcndjv height, bkb width, bkb position cj pyfxtybtv absolute, bkb writingMode cj pyfxtybtv tb-rl, bkb c contentEditable ecnfyjdktyysv d true.

hbvth (ecnfyfdkbdftv ghjphfxyjcnm yf gjkjdbye):

.img1 { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); }/* cbynfrcbc IE5.5+ (zdkztncz ghtlgjxnbntkmysv) */
.img2 { filter: alpha(opacity=50); } /* cbynfrcbc IE4 */

kz ecnfyjdrb ghjphfxyjcnb xthtp crhbgn bcgjkmpetv: object.style.filter = "progid:DXImageTransform.Microsoft.Alpha(cnhjrf gfhfvtnhjd)". kz gjkextybz ghjphfxyjcnb fyfkjubxyjq ghjphfxyjcnb W3C bcgjkmpetv d rfxtcndt cnhjrb gfhfvtnhjd pyfxtybt "opacity=xbckj jn 0 lj 100". gbcfybt dct[ gfhfvtnhjd cvjnhbnt yf cnhfybwt jgbcfybz abkmnhf. fr ;t jxtym df;yj pyfnm cktle.ott: c ds[jljv Windows XP gjzdbkjcm cukf;bdfybt 'rhfyys[ ihbanjd vtnjljv ClearType, f dvtcnt c ybv b gj,jxyst 'aatrns d IE ghb bcgjkmpjdfybb 'njuj vtnjlf cukf;bdfybz; d yfitv ckexft, tckb ghbvtyztncz ghjphfxyjcnm r 'ktvtyne c ntrcnjv ghb drk.xtyyjv vtnjlt cukf;bdfybz ClearType, nj ntrcn gthtcnftn yjhvfkmyj jnj,hf;fnmcz (gjke;bhysq ntrcn - bold, yfghbvth, ldjbncz, vjuen nfr ;t gjzdkznmcz hfpkbxyst fhntafrns, yfghbvth d dblt xhnjxtr). kz njuj xnj,s bcghfdbnm gjkj;tybt, lkz IE ye;yj pflfnm ajyjdsq wdtn, CSS cdjqcndj background-color, 'ktvtyne r rjnjhjve ghbvtyztncz ghjphfxyjcnm. cxfcnm. d IE7 ,fu ecnhfyty.

CSS opacity cbv,bjp

jl cbv,bjpjv z gjlhfpevtdf. j,]tlbytybt hfpys[ cnbktq lkz hfpys[ ,hfepthjd d jlyjv CSS ghfdbkt lkz gjkextybz ye;yjuj 'aatrnf, n.t. lkz htfkbpfwbb rhjcc-,hfepthyjcnb.

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/
-moz-opacity: 0.5; /* Mozilla 1.6 b yb;t */
-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */

j cenb, ye;ysvb zdkz.ncz gthdjt b gjcktlytt ghfdbkf, lkz IE5.5+ b ,hfepthjd gjybvf.ob[ CSS3 opacity, f ldf ghfdbkf gj cthtlbyt zdyj gjujls yt ltkf.n, yj b yt jxtym nj b vtif.n (cfvb htifqnt, ye;ys kb jyb dfv).

Javascript opacity cbv,bjp

tgthm gjghj,etv ecnfyjdbnm ghjphfxyjcnm xthtp crhbgn c extnjv jcj,tyyjcntq hfpys[ ,hfepthjd jgbcfyys[ dsit.

function setElementOpacity(sElemId, nOpacity)
{
var opacityProp = getOpacityProperty();
var elem = document.getElementById(sElemId);

if (!elem || !opacityProp) return; // ckb yt ceotcndetn 'ktvtyn c erfpfyysv id bkb ,hfepth yt gjllth;bdftn yb jlby bp bpdtcnys[ aeyrwbb cgjcj,jd eghfdktybz ghjphfxyjcnm.

if (opacityProp=="filter") // Internet Exploder 5.5+
{
nOpacity *= 100;

// ckb e;t ecnfyjdktyf ghjphfxyjcnm, nj vtyztv t xthtp rjkktrwb. filters, byfxt lj,fdkztv ghjphfxyjcnm xthtp style.filter
var oAlpha = elem.filters['DXImageTransform.Microsoft.alpha'] || elem.filters.alpha;
if (oAlpha) oAlpha.opacity = nOpacity;
else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")"; // kz njuj xnj,s yt pfnthtnm lheubt abkmnhs bcgjkmpetv "+="
}
else // heubt ,hfepths
elem.style[opacityProp] = nOpacity;
}

function getOpacityProperty()
{
if (typeof document.body.style.opacity == 'string') // CSS3 compliant (Moz 1.7+, Safari 1.2+, Opera 9)
return 'opacity';
else if (typeof document.body.style.MozOpacity == 'string') // Mozilla 1.6 b vkflit, Firefox 0.8
return 'MozOpacity';
else if (typeof document.body.style.KhtmlOpacity == 'string') // Konqueror 3.1, Safari 1.1
return 'KhtmlOpacity';
else if (document.body.filters && navigator.appVersion.match(/MSIE ([d.]+);/)[1]>=5.5) // Internet Exploder 5.5+
return 'filter';

return false; //ytn ghjphfxyjcnb
}

eyrwbz ghbybvftn ldf fhuevtynf: sElemId - id 'ktvtynf, nOpacity - dtotcndtyyjt xbckj jn 0.0 lj 1.0 pflf.ott ghjphfxyjcnm d cnbkt CSS3 opacity.

evf., xnj cnjbn gjzcybnm xfcnm rjlf aeyrwbb setElementOpacity jnyjczoe.cz r IE.

var oAlpha = elem.filters['DXImageTransform.Microsoft.alpha'] || elem.filters.alpha;

if (oAlpha) oAlpha.opacity = nOpacity;
else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")";

j;tn djpybryenm djghjc, f gjxtve ,s yb ecnfyfdkbdfnm ghjphfxyjcnm gentv ghbcdfbdfybz (=) cdjqcnde elem.style.filter = '...';? fxtv bcgjkmpetncz "+=" lkz lj,fdktybz d rjytw cnhjrb cdjqcndf filter? ndtn ghjcn, lkz njuj xnj,s yt "pfnthtnm" lheubt abkmnhs. j ghb 'njv, tckb lj,fdbnm abkmnh nfrbv j,hfpjv dnjhjq hfp, nj jy yt bpvtybn hfytt ecnfyjdktyyst pyfxtybz 'njuj abkmnhf, f ,eltn ghjcnj lj,fdkty d rjytw cnhjrb cdjqcndf, xnj yt rjhhtrnyj. j'njve, tckb abkmnh e;t ecnfyjdkty, nj ye;yj bv vfybgekbhjdfnm xthtp rjkktrwb. ghbvtytyys[ r 'ktvtyne abkmnhjd: elem.filters (yj exnbnt, tckb abkmnh to yt ,sk yfpyfxty 'ktvtyne, nj eghfdkznm bv xthtp lfyye. rjkktrwb. ytdjpvj;yj). jcneg r 'ktvtynfv rjkktrwbb djpvj;ty kb,j gj bvtyb abkmnhf, kb,j gj byltrce. lyfrj abkmnh vj;tn ,snm pflfy d lde[ cnbkz[, d rjhjnrjv cnbkt IE4, bkb d cnbkt IE5.5+, xnj b exntyj d rjlt.

kfdyjt bpvtytybt ghjphfxyjcnb 'ktvtynf

jnjdjt htitybt. cgjkmpetv ,b,kbjntre opacity.js

<html>
<head>
<!-- cnfyfdkbdftv bpyfxfkmye. ghjphfxyjcnm rfhnbyjr -->
<style type="text/css">
img {
filter:alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
</style>

<!-- jlrk.xftv ,b,kbjntre -->
<script type="text/javascript" src="/js/opacity.js"></script>

<script type="text/javascript">
// jplftv ghfdbkj bpvtytybz ghjphfxyjcnb: pflftv bvz ghfdbkf, yfxfkmye. b rjytxye. ghjphfxyjcnm, f nfr;t ytj,zpfntkmysq gfhfvtnh pflth;rb dkbz.obq yf crjhjcnm cvtys ghjphfxyjcnb
fadeOpacity.addRule('oR1', .3, 1, 30);
</script>

</head>
<body>

<img id="fImg1" onMouseOver="fadeOpacity(this.id, 'oR1')" onmouseout="fadeOpacity.back(this.id)" src="/img/strawberry.jpg" width="100" height="80" />
<img id="fImg2" onMouseOver="fadeOpacity(this.id, 'oR1')" onmouseout="fadeOpacity.back(this.id)" src="/img/tomato.jpg" width="82" height="100" />
<img id="fImg3" onMouseOver="fadeOpacity(this.id, 'oR1')" onmouseout="fadeOpacity.back(this.id)" src="/img/sweet_cherry.jpg" width="98" height="97" />

</body>
</html>
CSS opacityCSS opacityCSS opacity

cyjdyst ifub:

  1. jlrk.xftv ,b,kbjntre aeyrwbq;
  2. ghtltkztv ghfdbkf;
  3. spsdftv vtnjl fadeOpacity() lkz gthtntrfybz wdtnf jn yfxfkmyjuj r rjytxyjve, bkb fadeOpacity.back() lkz djpdhfnf r yfxfkmyjve wdtne.

fp;tdsdftv

fr gjlrk.xfnm ,b,kbjntre, levf., dblyj bp ghbvthf dsit. tgthm cnjbn gjzcybnm jghtltktybt ghfdbk. j njuj rfr dspsdfnm vtnjls gkfdyjuj bpvtytybz ghjphfxyjcnb, ye;yj jghtltkbnm ghfdbkf, gj rjnjhsv ,eltn dsgjkyznmcz ghjwtcc: ye;yj jghtltkbnm yfxfkmye. b rjytxye. ghjphfxyjcnm, f nfr;t, ghb ;tkfybb, erfpfnm gfhfvtnh pflth;rb, rjnjhsq dkbztn yf crjhjcnm ghjwtccf cvtys ghjphfxyjcnb.

hfdbkf jghtltkz.ncz c gjvjom. vtnjlf fadeOpacity.addRule

bynfrcbc: fadeOpacity.addRule (sRuleName, nStartOpacity, nFinishOpacity, nDalay)

huevtyns:

  • sRuleName - bvz ghfdbkf, pflfncz ghjbpdjkmyj;
  • nStartOpacity b nFinishOpacity - yfxfkmyfz b rjytxyfz ghjphfxyjcnm, xbckf d lbfgfpjyt jn 0.0 lj 1.0 ;
  • nDelay - pflth;rf d vbkkbctreylf[ (ytj,zpfntkmysq fhuevtyn, gj evjkxfyb. hfdty 30).

fv dspjd atqlbyuf ghjphfxyjcnb ltkftv xthtp vtnjls fadeOpacity(sElemId, sRuleName), ult sElemId 'nj id 'ktvtynf, f sRuleName bvz ghfdbkf. kz djpdhfnf ghjphfxyjcnb d bc[jlyjt cjcnjzybt bcgjkmpetncz vtnjl fadeOpacity.back(sElemId).

:hover lkz ghjcnjq cvtys ghjphfxyjcnb

o jnvtxe, xnj lkz ghjcnjq cvtys ghjphfxyjcnb (yj yt gjcntgtyyjuj t bpvtytybz) d cfvsq hfp gjl[jlbn gctdlj-ctktrnjh :hover, rjnjhsq gjpdjkztn jghtltkbnm cnbkb lkz 'ktvtynf, d vjvtyn yfdtltybz yf ytuj vsib.

<style type="text/css">
a:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
</style>

<a href="javascript:void(0)"> <img src="/images/articles/strawberry.jpg" width="100" height="80" /> </a>

CSS opacity b gctdlj-ctktrnjh :hover

,hfnbnt dybvfybt, xnj rfhnbyrf hfpvtotyf dyenhb 'ktvtynf A. tkj d njv, xnj Internet Explorer dgkjnm lj dthcbb 6, gjybvftn gctdlj-ctktrnjh :hover, njkmrj ghbvtybntkmyj r ccskrfv, f yt r k.,sv 'ktvtynfv, rfr gjkj;tyj d CSS (d IE7 gjkj;tybt bcghfdktyj).

hjphfxyjcnm b pfpe,htyysq ntrcn d IE

fgjcktljr [jxe crfpfnm, ghbvtyzz ghjphfxyjcnm r ntrcne ,jkmijuj hfpvthf d Internet Explorer, ds cnjkrytntcm c ntv, xnj 'njn ntrcn ,eltn pfpe,htyysv. kz ecnhfytybz 'njuj ytghbznyjuj "cgtw'aatrnf" cktletn pflfnm ajy ntrcnjdjve 'ktvtyne, r rjnjhjve ghbvtyztncz ghjphfxyjcnm, ecnfyjdbd CSS cdjqcndj background-color.

dnjh: sushkfi ujhm tigir.com/opacity.htm

3
  ,
:
. +7(98I) 7608865

e-mail
icq 415547094  romver  mail.ru  romverinbox.ru
1997 - 2024 romver.ru

Display Pagerank