Дар бораи CSS3 Opacity омӯзед

Шабакаҳои худро фахр кунед

Яке аз чизҳое, ки шумо метавонед ба осонӣ дар тарҳрезии чоп кор кунед, вале на дар веб саҳифа матнеро, ки дар расм ё рангҳои рангин навишта шудааст, ва шаффофияти ин тасвирро тағйир диҳед, то матне, ки дар замина қарор дорад. Аммо моликияти CSS3 вуҷуд дорад , ки ба шумо имконият медиҳад, ки асбобҳои элементҳои худро тағйир диҳед, то ки онҳо дар дохили ва берунӣ ҷойгир шаванд.

Чӣ тавр истифодабарии моликияти Opel

Амволи гаравӣ арзиши ҳаҷми шаффоф аз 0,0 то 1.0 мебошад.

0.0 100% шаффоф - чизе аст, ки дар он элемент пурра ба воситаи нишон дода мешавад. 1.0 100% opaque-nothing дар поён аз элемент нишон дода мешавад.

Пас, барои эҷоди унсури 50% шаффоф, шумо нависед:

Opacity: 0.5;

Ба баъзе мисолҳои решакан кардани амалиёт нигаред

Боварӣ ба тафтишоти пешинаи санҷишӣ

На IE 6 на 7 иншооти америкоӣ CSS3 -ро дастгирӣ намекунад. Аммо шумо аз шукр нестед. Ба ҷои ин, IE танҳо филтрҳои филтрии феълии Microsoft -ро дастгирӣ мекунад. Филтрҳои Alpha дар IE қабули аҳамият аз 0 (пурра шаффоф) то 100 (пурра тамоман нест). Барои ҳамин, шаффофияти шумо дар IE ба даст меоред, шумо бояд рангҳои худро ба 100 табдил диҳед ва фазои филтрро илова кунед:

филтр: alpha (opacity = 50);

Ба филтр alpha дар амал (нигаред ба IE)

Ва пешфарзҳои браузерро истифода баред

Шумо бояд пешакҳои -moz- and -webkit-prefix-ро истифода баред, то ки тарҷумаҳои калони Mozilla ва Webkit-ро низ дастгирӣ кунанд:

-вебкит-фосила: 0,5;
-муайян: 0,5;
Opacity: 0.5;

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

Пешгӯиҳои браузери дар браузери Mozilla ва Webkit калонтарро санҷед.

Шумо метавонед тасвирҳои хеле кӯтоҳро тазаккур диҳед

Opacity дар бораи тасвири худ гузошта ва он ба background зада. Ин дар ҳақиқат барои тасвирҳои аслӣ муфид аст.

Ва агар шумо дар такрори лавҳаи иловагӣ илова кунед, шумо метавонед ба таври худкор тағир диҳед, ки танҳо бо тағйир додани рамзи тасвир.

Бояд гуфт,
филтр: alpha (opacity = 50)
Филтри: Дисплей: DXImageTransform.Microsoft.Alpha (opacity = 50)
-муайян: 0,5;
-вебкит-фосила: 0,5;
Opacity: 0.5;
}}

Ба ин HTML таъсир мерасонад:

Саволҳо ва HTML дар амалро санҷед.

Матнро дар тасвирҳои худ гузоред

Бо асбобҳо, шумо метавонед матнро ба тасвир гузоред ва тасвиреро, ки дар он матн аст, пайдо кунед.

Ин техника як қадами каме аст, зеро шумо наметавонед фақат тасвири сурудро ба даст оред, зеро он тамоми тасвирро пур мекунад. Ва шумо наметавонед қуттии матниро гузоред , зеро матн низ дар он ҷо мемонад.

1. Аввал шумо як контейнер DIV эҷод мекунед ва тасвири худро дар дохили:

   
   

2. Бо тасвири DIV-ин пайравӣ пайравӣ кунед, он чӣ шумо шаффоф хоҳед кард.

   
   
   

3. Дар охирин чизе, ки шумо дар HTML доред, DIV бо матни шумо дар он аст:

   
   
   
   Ин сагаш Шаста аст. Оё ӯ зебост?

4. Шумо онро бо CSS ҷойгир кардан мехоҳед, то ки матнро дар болои тасвир ҷойгир кунед. Матни манро дар тарафи чап ҷойгир кард, аммо шумо метавонед онро ба тарафи рост тағир диҳед: хосиятҳои рост: 0; .

   #image {
   мавқеи: нисбӣ;
   width: 170px;
   баланд: 128px;
   маржа: 0;
   }}
   #text {
   мавқеъ: мутлақ;
   top: 0;
   left: 0;
   васеъ: 60px;
   баландӣ: 118px;
   background: #fff;
   padding: 5px;
   }}
   #text {
   филтр: alpha (opacity = 70);
   филтр: пешакӣ: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -муайянӣ: 0.70;
   Opacity: 0.7;
   }}
   # калимаҳои {
   мавқеъ: мутлақ;
   top: 0;
   left: 0;
   васеъ: 60px;
   баландӣ: 118px;
   замина: шаффофият;
   padding: 5px;
   }}

Нигоҳ кунед, ки чӣ гуна назар мекунад