CSS jan nou koumanse transparans. Transparan background oswa tèks ak CSS

Avèk avenman a nan Designers entènèt CSS3 travay nan plizyè fason te vin pi fasil ak plis ki lojik: apre tout, ou kapab kounye a reyèlman genyèn flexibilité Customize nenpòt objè, mwens souvan recourir nan JavaScript. Se pou nou di ou bezwen ajiste transparans nan background nan - CSS imedyatman ofri plizyè chwa.

Jan nou koumanse defini nan yon seri atribi (background-imaj, jan nou koumanse-pozisyon , jan nou koumanse-gwosè, jan nou koumanse-repete, jan nou koumanse-atachman, jan nou koumanse-orijin, jan nou koumanse-clip, jan nou koumanse-koulè), chak nan yo ki ka kapab asiyen separeman oswa konbine anba atribi nan jan nou koumanse. Annou egzamine chak nan yo an detay.

Atribi jan nou koumanse-koulè

Nan CSS, koulè nan background ka mete nan plizyè fason: lè l sèvi avèk yon kòd Egzagòn, non koulè oswa Rgb-antre. Nan CSS3 li te vin posib yo sèvi ak olye pou yo opsyon Rgb-anrejistreman ak RGBA.

se Egzagòn Kòd koulè ekri nan pwopriyete a apre lasi a: jan nou koumanse-koulè: # FFDAB9. Si karaktè yo ki nan sa a antre se pè yo menm, kòd a se nòmalman yon koupe ti kras: ka # ccff00 dwe ekri kòm # cf0:

kò {jan nou koumanse-koulè: # cf0 ;}.

Non an se, menm nan koulè yo pi ekzotik. Pou egzanp, nan adisyon a wouj nan estanda ak blan ou ka itilize NavajoWhite (#FFDEAD) oswa Honeydew2 (# E0EEE0):

kò {background-koulè: koulè wouj violèt; }.

Opsyon nan lèt se Rgb oswa RGBA antre pèmèt ou presize pa sèlman koulè, men tou transparans nan background nan CSS, men metòd la travay sèlman nan vèsyon IE ki gen plis pase 9. Lòt navigatè rekonèt nòmal vèsyon ak transparans. Dapre nòm yo W3C li se pi preferab yo sèvi ak toujou RGBA olye pou yo Rgb an plis dabitid.

Valè a sot pase a nan RGBA jan nou koumanse epi li kouche stupidity a soti nan 0 (transparan) nan 1 (opak).

Gen kèk valè dwòl. ka koulè nan background dwe mete lè l sèvi avèk HSL a ak HSLA. Tou de yo te ajoute nan CSS3, se poutèt sa yo pa sipòte pa IE vèsyon 9 oswa pi wo. Reyalizasyon ki idantik Rgb oswa RGBA, se sèlman nan yon fòma diferan: tent (lonbraj - valè sou volan an koulè, yo bay nan degre), boure (saturation - entansite koulè kòm yon pousantaj, ki ant 0 a 100), légèreté (légèreté - klète, mezire Menm jan an tou paramèt boure ).

Atribi jan nou koumanse-image

pi Vèsyon an kwa-navigatè nan background nan transparan - sa a se pou yo sèvi ak imaj la. Nan CSS3, ou ka mete menm plis imaj, sa a se fè nan yon vigil. egzanp:

{Imaj background-kò: url (bg1.png), url (bg2.png)}.

Sa a fason pou sipòte menm IE8. imaj plizyè nan background nan nan kawotchou a yo itilize nan Layout la. Importantly, pa bliye yo sèvi ak nenpòt ki imaj, li mete koulè a background nan CSS, kòm itilizatè yo ka tou senpleman Upload yon imaj.

Atribi background-pozisyon

Si ou itilize imaj la yo mete inite a jan nou koumanse, CSS pèmèt ou nan pozisyon imaj la nenpòt kote sou ekran an. Pa default, se imaj an ki sitiye nan kwen siperyè agòch. Atribi pran swa enstriksyon vèbal (anwo, anba, agoch, adwat), yon nimerik (enterè, piksèl ak lòt inite yo). Nan ka sa a, ou dwe presize de valè, orizontal ak vètikal:

kò {background-pozisyon: dwa sant ;} - nan egzanp sa a, yo pral modèl la pral lokalize sou bò dwat la nan paj la, tèt la ak anba nan distans la imaj yo menm bagay la.

Atribi jan nou koumanse-gwosè

Pafwa li nesesè yo detire background nan CSS oswa diminye gwosè li yo. Pou fè sa, sèvi ak atribi background-gwosè a, ak gwosè a nan background nan ka mete nan piksèl oswa pousantaj, ak nenpòt lòt inite.

Avèk sa a atribi, gen kèk pwoblèm, paske yo korije ekspozisyon nan yon background nan vèsyon yo pi bonè nan prefiks yo navigatè dwe itilize. Natirèlman, vèsyon aktyèl la konplètman sipòte atribi sa a epi yo bezwen an pou pwopriyete espesifik disparèt.

Atribi background-atachman

atribi sa a presize konpòtman an nan imaj yo jan nou koumanse pandan y ap defile. Se konsa, li ka pran 3 valè (ki pa enkli eritye a, total la pou tout moun nan atribi ki diskite nan atik sa a):

• fiks - fè foto a sou background nan nan fiks;
• woulo liv - woulo jan nou koumanse ak rès la nan eleman yo;
• lokal - se imaj la sou background defiled si defile gen kontni. se background ki ale pi lwen pase sa ki nan ankadreman an fiks yo.

Egzanp yo itilize:

kò {background-atachman fiks}.

Kounye a, Firefox pa sipòte pwopriyete ki sot pase a (lokal).

Atribi jan nou koumanse-orijin

atribi Sa a se responsab pou eleman nan pwezante. navigatè Bonè mande pou sèvi ak prefiks. Pwopriyete a tèt li gen twa paramèt:

• se padding-bwat positionné relatif nan modèl la kwen, pandan w ap pran an kont epesè a nan ankadreman an;
• fwontyè-bwat pwopriyete diferan de anvan an nan ki liy nan fwontyè yo ka konplètman oswa pasyèlman sipèpoze modèl la;
• kontni-bwat imaj pwezante pryavyazyvaya kontni li yo.

Si ou presize valè miltip, Lè sa a, navigatè ka reyaji nan pwòp fason yo: Firefox ak Opera wè sèlman opsyon a an premye.

Atribi background-repete

Kòm yon règ, si se imaj la background espesifye, li dwe repete orizontal oswa vètikal. Pou sa ak itilize atribi background-repete la. Se konsa, blòk jan nou koumanse, CSS ki gen tankou yon pwopriyete ka gen youn nan plizyè paramèt:

• pa gen okenn-repete - imaj la parèt sou yon paj nan yon vèsyon yon sèl;
• repete - se jan nou koumanse repete nan x la ak y;
• repete-x - se sèlman orizontal;
• repete-y - se sèlman vètikal;
• espas - se jan nou koumanse repete, men si espas se enposib ranpli nan genyen ant foto yo parèt vid,
• wonn - se imaj la scaled, si li pa ranpli zòn nan tout antye nan foto antye.

Egzanp nan atribi yo:

kò {background-repete: no- repete repete} - menm jan an jan nou koumanse-repete: repete-y.

Nan CSS3 ka presize valè pou imaj miltip lè lis paramèt, separe pa vigil.

Atribi background-clip

atribi sa a defini konpòtman an nan background nan anba limit yo (egzanp, nan ka a nan ankadreman yo pwentiye an):

• padding-bwat - jan nou koumanse parèt nan enteryè a nan blòk la;
• fwontyè-bwat - imaj la vini anba fondasyon an;
• kontni-bwat - foto a sou background nan pral sèlman parèt nan kontni an.

Egzanp yo itilize:

kò {background-clip: Content bwat;}.

Chrom ak Safari mande pou-webkit- prefiks.

atribi stupidity epi filtre

stupidity atribi pèmèt ou mete transparans nan background nan - pwopriyete CSS ap travay nan tout navigatè. Se valè a mete nan seri a soti nan 0.0 1.0 enklizif. Nan ka sa a, ou ka mete transparans nan background nan CSS pa gen okenn valè nonb antye relatif olye pou yo 0.3 se ase yo ekri .3:

.Blòk {background-image: url ( img.png); stupidity: .3;}.

Yo mete stupidity la background, CSS se apwopriye menm pou IE anba a vèsyon an nevyèm, sèvi ak atribi nan filtre:

.Blòk {background-image: url ( img.png); filtre: alfa (stupidity = 30)}.

Nan ka sa a, se valè a stupidity mete ant 0 ak 100. Remake byen ke stupidity a atribi anviwònman transparans diferan atravè RGBA pòsyon tè: lè w ap itilize stupidity vin klè pa sèlman background nan, men tou, tout eleman ki anndan apatman an.

Toujou kontwole Statistik l 'ou pou navigatè CIS ak tout lòt peyi yo. Pwoblèm nan pi gwo nan tout DTP - vèsyon ki pi ansyen nan IE, yo pa pèmèt ou sèvi ak CSS3 nan limit plen. Nan Layout pa bliye yo sèvi ak sèvis sa yo espesyal ki tcheke si navigatè ou a sipòte nenpòt ki byen CSS. Si ou pa kapab enstale vèsyon ki pi ansyen nan navigatè, jwenn yon sèvis ki pral tcheke pou wè travay nan sit nan navigatè miltip entènèt.