Шаффофият замина CSS. заминаи шаффоф ва ё матн бо CSS

Бо пайдоиши Интернет-дизайнерҳо CSS3 дар бисёр ҷиҳатҳо кор осонтар ва мантиқӣ бештар пайдо кардааст: баъд аз ҳама, акнун шумо метавонед дар ҳақиқат чандири танзим ягон объект, камтар зўрї JavaScript. Биё мегӯянд, ки шумо бояд ба танзим шаффофияти замина - CSS дарҳол пешниҳод якчанд имконоти.

Замина муайян маҷмӯи хусусиятҳои (замина-тасвир, заминаи мавқеи , заминаи-андоза, заминаи-ро такрор кунед, заминаи-замима, заминаи-пайдоиши, заминаи-сӯзанак замина-ранги), ҳар як аз он мумкин аст алоҳида таъин ё омехта дар назди аттрибутӣ замина. Биёед, ҳар як аз онҳо имтиҳон ба таври муфассал.

Коил замина-ранги

Дар CSS, ранги замина бо истифода аз рамзи шонздаҳӣ, номи ранг ё RGB-вуруд: мумкин аст, дар як чанд усулњои муқаррар карда мешавад. Дар CSS3 имконпазир гашт истифода ҷои хосият RGB-сабти бо RGBA.

замина-ранги: # FFDAB9 рамзи ранги шонздаҳӣ аст, ки дар мулки пас аз lattice навишта шудааст. Агар аломатҳои дар ин вуруд ҷуфтҳоро ҳамин аст, ки Кодекси аст, одатан дар як набуред, каме: # ccff00 метавон ҳамчун # cf0 навишта шудааст:

мақоми {замина-ранги: # cf0 ;}.

Номи аст, ки ҳатто дар рангҳои аҷиб бештар. Масалан, ба ғайр аз стандарти сурх ва сафед шумо метавонед NavajoWhite (#FFDEAD) ё Honeydew2 (# E0EEE0) истифода мебаранд:

мақоми {замина-ранги: арғувон; }.

Варианти дуюм RGB аст ё ворид RGBA имкон медиҳад ба шумо муайян намудани на танҳо ранг, балки ҳамчунин ба шаффофияти замина CSS, балки усули танҳо дар версияҳои IE калонтар аз 9 кор мекунад. браузерҳои дигар эътироф нусхаи муқаррарӣ бо шаффофият. Бино ба стандартҳои W3C он Наѓз истифода аст, ҳанӯз ҳам RGBA ҷои RGB муқаррарии бештар.

Арзиши гузашта дар замина RGBA ва муқаррар кардани ётњои аз 0 (шаффоф) ба 1 (ношаффоф).

Баъзе аз арзишҳои ғайриоддӣ нест. Ранги замина метавон бо истифода аз HSL ва HSLA муқаррар карда мешавад. Ҳар ду ба CSS3 илова карда шуданд, ва аз ин рӯ аз тарафи IE нусхаи 9 ё олї дастгирӣ нашуда истодааст. Embodiments RGB шабеҳ ё RGBA, танҳо дар формати гуногун: бағоят (сояҳо - арзиши оид ба чархи ранги аст, ба дараҷаҳо дода), Saturate (пур кардани - шиддатнокии ранги бо фоиз, аз 0 то 100), бемулоҳиза (бемулоҳиза - дурахши, чен монанд параметри Saturate ).

Коил замина-тасвир

Дар аксари версияи салиб-браузери замина шаффоф - ин истифода аз тасвир аст. Дар CSS3, шумо метавонед суратҳо ҳам гузошт, ин аст, ба воситаи вергул анҷом дода мешавад. масалан:

{Симои паснамо-мақоми: URL (bg1.png), URL (bg2.png)}.

Ин роҳи дастгирии ҳатто IE8. Якчанд тасвирҳои дар замина аз резинӣ истифода дар тарҳбандии. Муҳим аст, фаромӯш накунед, ки ба истифодаи дилхоҳ сурат ва насб кардани ранги заминаи дар CSS, ҳамчун истифодабарандагони танҳо метавонед тасвир бор.

Коил замина мавқеи

Агар шумо истифода тасвир ба танзим воҳиди замина, CSS шумо имкон медиҳад, ки ба мавқеъи симои дилхоҳ дар экран. Бо нобаёнӣ, тасвири аст, ки дар кунҷи болоии тарафи чапи ҷойгир шудааст. Аттрибутӣ ё дастурҳои шифоҳӣ (боло, поён, чап, рост), як ададӣ (фоизҳо, пиксел ва воҳидҳои дигар) сурат мегирад. Дар ин ҳолат, шумо бояд ба ду арзишҳо, уфуќї ва амудї муайян:

мақоми {замина мавқеи: маркази ҳуқуқ ;} - дар ин Масалан, намунаи мешавад дар тарафи рости саҳифа, ба боло ва поёни масофаи тасвир ба ҳамин ҷойгир шудааст.

Коил замина-андозаи

Баъзан он ба даст ёзанд замина CSS ё кам андозаи он зарур аст. Барои ин кор, истифода аттрибутӣ замина-андоза, ва ба андозаи замина метавонад дар пиксел ё фоиз муқаррар карда, ва њама гуна воњидњои дигар.

Бо ин аттрибутӣ, баъзе мушкилот вуҷуд дорад: барои намоиши дурусти замина дар нусхаҳои пештара аз префикси браузери ба истифода бурда шавад. Албатта, нусхаи кунунӣ, пурра дастгирӣ ин аттрибутӣ ва зарурати хосиятҳои мушаххас нопадид шуд.

Коил замина-замима

Ин аз они Худованд ба рафтори тасвири замина дар ҳоле ки ҳаракатро, муайян мекунад. Пас, он метавонад 3 арзишҳои (аз љумла ба мерос умумии барои тамоми хусусиятҳои дар ин мақола муҳокима надорад) гирад:

• муайян - месозад расм дар заминаи собит;
• ҳаракат - дафтарҳо замина бо боқимондаи элементҳои;
• маҳаллӣ - бо тасвири замина scrolled мешавад, агар ҳаракаткунанда дорад маводи. Замина, ки берун аз мазмуни чаҳорчӯбаи меравад собит аст.

Намунаи истифодаи:

мақоми {замина-замима собит}.

Айни замон, Firefox тавр моликияти охир (маҳаллӣ) пуштибонӣ намекунад.

Коил замина-пайдоиши

Ин аз они Худованд барои унсури мавќеъ аст. браузерҳои барвақт талаб истифодаи префикси. Ба молу мулки худ дорои се параметри:

• padding-қуттии мавқеъи аст, нисбат ба намунаи канори ин, дар ҳоле ки бо назардошти ғафсӣ аз доираи;
• сарҳад-қуттии хосиятҳои гуногун аз гузашта, ки дар хати сарҳадӣ метавонад пурра ё қисман мепушонанд намунае;
• мазмуни-қуттии тасвир Мавқеияти мазмуни он pryavyazyvaya.

Агар шумо арзишҳои сершумор муайян, он гоҳ браузерҳо метавонанд дар роҳи худ муносибат: Firefox ва Opera намедонанд, танҳо имкони аввал.

Коил замина-ро такрор кунед

Чун қоида, агар тасвири замина муайян карда мешавад, он бояд ба таври уфуқӣ ё амудӣ такрор карда шавад. Барои ин истифода аттрибутӣ замина-такрор. Ҳамин тавр, заминаи блоки, CSS, ки дорои чунин молу мулк метавонад яке аз якчанд параметрҳо дошта бошад:

• нест-такрор - тасвир дар саҳифаи дар як нусхаи ягонаи пайдо;
• такрор - замина аст, ки дар х ва Y такрорӣ;
• такрор-х - танҳо ба таври уфуқӣ;
• такрор-Y - танҳо амудӣ;
• фазо - замина такрор мешавад, вале агар фазои имконнопазир аст, ки ба пур байни тасвирҳо пайдо холӣ;
• Даври - тасвир васеъ карда мешавад, агар он дар тамоми майдони тамоми тасвирҳо пур накардаӣ.

Намунаи хусусиятҳои:

мақоми {замина-ро такрор кунед: Юҳ такрор такрорӣ} - ҳамин замина-ро такрор кунед: такрор-Y.

Дар CSS3 метавонад арзишҳои барои тасвирҳои гуногун дар рӯйхати параметрҳои, ҷудо бо вергул ҷудо намоед.

Коил замина-клипи

Ин аттрибутӣ рафтори замина дар назди сарҳадҳои (мисол, дар сурати аз доираи дуда) муайян:

• padding-қуттии - замина нишон дода, дар дохили блоки;
• сарҳад-қуттии - тасвири меояд, дар доираи;
• мазмуни-қуттии - расм дар заминаи танҳо дар доираи мундариҷа пайдо мешаванд.

Намунаи истифодаи:

мақоми {замина-клипи: content- қуттии;}.

Chrom ва сафари талаб пешванд -webkit-.

хусусиятҳои ётњои ва филтр

аттрибутӣ ётњои шумо имкон медиҳад, барои насб кардани шаффофият дар заминаи - амволе, CSS дар ҳамаи браузерҳо кор хоҳад кард. Арзиши аст, ки дар доираи аз 0,0 то 1,0 фарогир муқаррар карда мешавад. Дар ин ҳолат, шумо метавонед ба шаффофияти замина CSS муқаррар нест, арзиши бутуни ба ҷои 0,3 кофӣ ба нависед .3 аст:

.block {замина-тасвир: URL ( img.png); ётњои: .3;}.

Барои танзими ётњои замина, CSS муносиб ҳатто барои IE зер нусхаи нӯҳум аст, ки истифода аз они Худованд филтрҳо:

.block {замина-тасвир: URL ( img.png); Филтри: алфа (ётњои = 30)}.

Дар ин ҳолат, арзиши ётњои аст байни 0 ва 100. Эзоҳ танзим, ки ётњои қоил танзимотҳои гуногун шаффофияти тавассути мерос RGBA: ҳангоми истифодаи ётњои мегардад равшан, на танҳо дар замина, балки ҳамаи элементҳои дохили воҳиди.

Ҳамеша омори истифодаи худро барои браузерҳо ИДМ ва кишварҳои дигар назорат менамояд. Бузургтарин мушкили тамоми DTP - нусхаҳои кӯҳнаи IE, онҳо имкон намедиҳад, ки шумо истифода CSS3 пурра. Дар тарҳбандии фаромӯш накунед, ки истифода аз хадамоти махсус, ки кунед, ки оё браузери шумо ягон молу мулки CSS дастгирӣ мекунад. Агар шумо метавонед тарҷумаҳои калонсол браузерҳо насб не, пайдо хадамоти ки дар кори сомона дар браузерҳои гуногун онлайн, санҷед.