CSS lẹhin akoyawo. Sihin lẹhin tabi ọrọ pẹlu CSS

Pẹlu awọn dide ti CSS3 ayelujara apẹẹrẹ ṣiṣẹ ni ọpọlọpọ awọn ọna ti di rọrun ati siwaju sii mogbonwa: lẹhin ti gbogbo, o le bayi gan flexibly ṣe eyikeyi ohun, kere nigbagbogbo resorting si JavaScript. Jẹ ká sọ o nilo lati satunṣe awọn akoyawo ti awọn lẹhin - CSS lẹsẹkẹsẹ nfun ni orisirisi awọn aṣayan.

Lẹhin asọye nipa kan ti ṣeto ti eroja (lẹhin-image, lẹhin-ipo , lẹhin-iwọn, lẹhin-tun, lẹhin-asomọ, lẹhin-Oti, lẹhin-agekuru, lẹhin-awọ), kọọkan ti eyi ti o le wa ni sọtọ lọtọ tabi ni idapo labẹ awọn ro pe lẹhin. Ẹ jẹ ki wadi kọọkan ti wọn ni apejuwe awọn.

Ikalara lẹhin-awọ

Ni CSS, awọn lẹhin awọ le ti wa ni ṣeto ni orisirisi ona: lilo a hex koodu, awọ orukọ tabi RGB-titẹsi. Ni CSS3 o ti di ti ṣee ṣe lati lo dipo ti RGB-gbigbasilẹ aṣayan pẹlu RGBA.

Hex awọ koodu ti wa ni gba silẹ ti ni awọn ohun ini lẹhin ti awọn ọlọnà: lẹhin-awọ: # FFDAB9. Ti o ba ti ohun kikọ ni yi titẹsi ni o wa kanna orisii, awọn koodu ti wa ni maa n kekere kan ge: # ccff00 le ti wa ni kọ bi # cf0:

body {lẹhin-awọ: # cf0 ;}.

Awọn orukọ ti wa ni, ani ninu awọn julọ nla, awọn awọ. Fun apẹẹrẹ, ni afikun si awọn bošewa pupa ati funfun ti o le lo NavajoWhite (#FFDEAD) tabi Honeydew2 (# E0EEE0):

body {lẹhin-awọ: eleyi ti; }.

Awọn igbehin aṣayan ni RGB tabi RGBA titẹsi faye gba o lati tokasi ko nikan awọ sugbon o tun awọn akoyawo ti awọn CSS lẹhin, ṣugbọn awọn ọna ti o ṣiṣẹ nikan ni IE awọn ẹya agbalagba ju 9. Burausa miiran da deede ti ikede pẹlu akoyawo. Ni ibamu si awọn W3C awọn ajohunše ti o jẹ preferable lati lo si tun RGBA dipo ti awọn diẹ ibùgbé RGB.

Awọn ti o kẹhin ni iye RGBA isale ati kn awọn opacity lati 0 (sihin) si 1 (akomo).

Nibẹ ni o wa diẹ ninu awọn dani síi. Awọn lẹhin awọ le ti wa ni ṣeto lilo awọn HSL ati HSLA. Mejeeji ni won fi kun si CSS3, ati nitorina ko ni atilẹyin nipasẹ IE version 9 tabi ti o ga. Embodiments aami RGB tabi RGBA, nikan ni kan yatọ si kika: Hue (iboji - iye lori awọn awọ kẹkẹ, ti wa ni fun ni iwọn), saturate (ekunrere - awọ kikankikan bi ogorun, lati 0 si 100), lightness (lightness - imọlẹ, wọn bakanna ni paramita saturate ).

Ikalara lẹhin-image

Awọn julọ agbelebu-kiri version of awọn sihin lẹhin - yi ni awọn lilo ti awọn aworan. Ni CSS3, o le ṣeto ani diẹ images, yi ti ni ṣe nipasẹ kan koma. apẹẹrẹ:

{Lẹhin-body aworan: url (bg1.png), url (bg2.png)}.

Ọna yi ti ni atilẹyin ani IE8. Orisirisi awọn aworan ninu awọn lẹhin ti awọn roba lo ninu awọn ifilelẹ. Pataki, ko ba gbagbe lati lo eyikeyi image ati ki o ṣeto awọn lẹhin awọ ni CSS, bi awọn olumulo le jiroro ni po si ohun image.

Ikalara lẹhin-ipo

Ti o ba lo awọn aworan lati ṣeto awọn lẹhin kuro, CSS faye gba o lati ipo awọn aworan nibikibi loju iboju. Nipa aiyipada, awọn aworan ti wa ni be ni oke ni osi loke. Ro gba boya isorosi ilana (oke, isalẹ, osi, ọtun), a ìtúwò (anfani, awọn piksẹli ati awọn miiran sipo). Ni idi eyi, o gbọdọ pato meji papo, petele ati inaro:

body {lẹhin-si ipo: ọtun aarin ;} - ni yi apẹẹrẹ, awọn Àpẹẹrẹ yoo wa ni be lori ọtun apa ti awọn iwe, oke ati isalẹ ti awọn aworan ijinna si awọn kanna.

Ikalara lẹhin-iwọn

Nigba miran o jẹ pataki lati na isan CSS lẹhin tabi din awọn oniwe-iwọn. Lati ṣe eyi, lo awọn ro pe lẹhin-iwọn, ati awọn iwọn ti awọn isale le ti wa ni ṣeto ni awọn piksẹli tabi ọgọrun, ati awọn eyikeyi miiran sipo.

Pẹlu yi ro pe, nibẹ ni o wa diẹ ninu awọn isoro: nitori ti o tọ àpapọ kan lẹhin ni awọn sẹyìn awọn ẹya ti awọn kiri prefixes lati ṣee lo. Dajudaju, ti isiyi ti ikede ni kikun atilẹyin yi ro pe ati awọn nilo fun pato ini mọ.

Ikalara lẹhin-asomọ

Yi ro pe so awọn ihuwasi ti awọn lẹhin images nigba ti lọ. Nítorí, o le ya awọn 3 iye (ko pẹlu awọn jogun, lapapọ fun gbogbo awọn ti awọn eroja sísọ ni yi article):

• titi - mu ki awọn aworan lori lẹhin ti o wa titi;
• yi lọ - lẹhin ki pẹlu awọn iyokù ti awọn eroja;
• agbegbe - awọn aworan lori lẹhin ti wa ni scrolled ti o ba ti lọ ni o ni akoonu. Lẹhin ti o lọ kọja awọn awọn akoonu ti awọn fireemu ti wa ni ti o wa titi.

Apẹẹrẹ ti lilo:

body {lẹhin-asomọ ti o wa titi}.

Lọwọlọwọ, Akata ko ni atilẹyin awọn ti o kẹhin ohun ini (agbegbe).

Ikalara lẹhin-Oti

Yi ro pe jẹ lodidi fun awọn aye ano. Tete burausa beere fun lilo awọn prefixes. Awọn ohun ini ara ni o ni meta sile:

• òwú-apoti wa ni ipo ojulumo si eti Àpẹẹrẹ, nigba ti mu sinu iroyin awọn sisanra ti awọn fireemu;
• àla-apoti-ini ti o yatọ si lati išaaju ni wipe awọn ala ila le jẹ patapata tabi die sile ni lqkan awọn Àpẹẹrẹ;
• akoonu-apoti aye image pryavyazyvaya awọn oniwe-akoonu.

Ti o ba pato ọpọ iye, ki o si aṣàwákiri le fesi ninu ara wọn ọna: Akata bi Ina ati Opera woye nikan ni akọkọ aṣayan.

Ikalara lẹhin-tun

Bi ofin, ti o ba ti isale aworan wa ni pato, o gbọdọ wa ni tun nâa tabi ni inaro. Fun yi ati ki o lo awọn ro pe lẹhin-tun. Bayi, Àkọsílẹ lẹhin, CSS eyi ti o ni iru kan ohun ini le ni ọkan ninu awọn orisirisi sile:

• ko si-tun - awọn aworan han lori iwe kan ni kan nikan ti ikede;
• tun - lẹhin ti wa ni tun ni x ati y;
• tun-x - nikan nâa;
• tun-y - nikan ni inaro;
• aaye - isale ti wa ni tun, sugbon ti o ba ti aaye jẹ soro lati kun ni laarin awọn aworan han sofo;
• yika - awọn aworan ti wa ni ti iwọn, ti o ba ti o ko ni kun gbogbo agbegbe ti gbogbo awọn aworan.

Apẹẹrẹ ti awọn eroja:

body {lẹhin-tun: no- tun tun} - iru lẹhin-tun: tun-y.

Ni CSS3 le pato iye fun ọpọ images nigbati kikojọ sile, niya nipa aami idẹsẹ sii.

Ikalara lẹhin-agekuru

Yi ro pe asọye awọn ihuwasi ti awọn lẹhin labẹ awọn aala (e.g., ninu awọn idi ti awọn ti sami awọn fireemu):

• òwú-apoti - lẹhin han ni inu ilohunsoke ti awọn Àkọsílẹ;
• àla-apoti - awọn aworan ba wa labẹ awọn ilana;
• akoonu-apoti - awọn aworan lori lẹhin ti yoo nikan han laarin awọn akoonu.

Apẹẹrẹ ti lilo:

body {lẹhin-agekuru: content- apoti;}.

Chrom ati Safari beere -webkit- ìpele.

Opacity eroja ati àlẹmọ

opacity ro faye gba o lati ṣeto awọn akoyawo ti awọn lẹhin - CSS ini yoo ṣiṣẹ ni gbogbo aṣàwákiri. Iye ti ṣeto ni ibiti o lati 0,0 si 1.0 jumo. Ni idi eyi, o le ṣeto awọn akoyawo ti awọn CSS lẹhin ko si odidi iye dipo ti 0.3 jẹ to lati kọ .3:

.block {lẹhin-aworan: url ( img.png); opacity: .3;}.

Lati ṣeto awọn lẹhin opacity, CSS ni o dara ani fun IE ni isalẹ kẹsan version, lo àlẹmọ ro:

.block {lẹhin-aworan: url ( img.png); Ajọ àlẹmọ: Alpha (opacity = 30)}.

Ni idi eyi, awọn opacity iye ti ṣeto laarin 0 ati 100. Akọsilẹ pe awọn opacity ikalara o yatọ akoyawo eto nipasẹ RGBA ilẹ-iní: nigba lilo opacity di ko ko nikan ni isale, sugbon tun gbogbo awọn eroja inu awọn kuro.

Nigbagbogbo atẹle rẹ lilo statistiki fun CIS burausa ati gbogbo awọn orilẹ-ede miiran. Awọn tobi isoro ti gbogbo DTP - àgbà awọn ẹya ti IE, won ko ba ko gba o laaye lati lo ni kikun iye CSS3. Ni akọkọ ko ba gbagbe lati lo awọn pataki awọn iṣẹ ti o ṣayẹwo boya rẹ kiri atilẹyin eyikeyi CSS ini. Ti o ba ti o ko ba le fi sori ẹrọ àgbà awọn ẹya ti burausa, ri iṣẹ kan ti yoo ṣayẹwo awọn ojula ise ni ọpọ burausa online.