לערן וועגן CSS3 אָפּאַסיטי

מאַכן דיין באַקקגראָונדס טראַנספּאַרענט

איינער פון די זאכן וואָס איר קענען לייכט טאָן אין דרוק פּלאַן אָבער נישט אויף די וועב איז אָוווערליי טעקסט אויף אַ בילד אָדער קאָלירט הינטערגרונט, און טוישן די דורכזעיקייַט פון דעם בילד אַזוי אַז די טעקסט פיידז אין די הינטערגרונט. אבער עס איז אַ פאַרמאָג אין קסס 3 וואָס וועט לאָזן איר צו טוישן די אָופּאַסאַטי פון דיין עלעמענטן אַזוי אַז זיי וועלקן אין און אויס: אָופּאַסאַטי.

ווי צו נוצן די אָפּאַסיטי פּראָפּערטי

די אָופּאַסאַטי פאַרמאָג נעמט אַ ווערט פון די סומע פון ​​דורכזעיקייַט פון 0.0 צו 1.0.

0.0 איז 100% טראַנספּעראַנט-עפּעס ונטער אַז עלעמענט וועט ווייַזן גאָר דורך. 1.0 איז 100% אָופּייק-גאָרנישט ונטער דער עלעמענט וועט ווייַזן דורך.

אַזוי צו שטעלן אַן עלעמענט צו 50% טראַנספּעראַנט, איר וואָלט שרייַבן:

אָופּאַסאַטי: 0.5;

זען עטלעכע ביישפילן פון אָופּאַסאַטי אין קאַמף

זיין זיכער צו פּרובירן אין עלטער בראַוזערז

ניט קיין הייסט 6 אדער 7 שטיצן די CSS3 אָופּאַסאַטי פאַרמאָג. אבער איר ניטאָ ניט פון גליק. אַנשטאָט, IE שטיצט אַ מיקראָסאָפט בלויז פאַרמאָג אַלף פילטער. אַלף פילטערס אין IE אָננעמען וואַלועס פון 0 (גאָר טראַנספּעראַנט) צו 100 (גאָר אָופּייק). אַזוי, צו באַקומען דיין דורכזעיקייַט אין הייסט, איר זאָל פאַרמערן דיין אָופּאַסאַטי דורך 100 און לייגן אַן אַלף פילטער צו דיין סטיילז:

פילטער: אַלף (אָופּאַסאַטי = 50);

זען די אַלף פילטער אין קאַמף (ד"ה בלויז)

און נוצן בראַוזער פּרעפיקסעס

איר זאָל נוצן די-מאָז- און -וועבקיט-פּרעפיקסעס אַזוי אַז עלטערע ווערסיעס פון מאָזיללאַ און וועבקיט בראַוזערז שטיצן עס אויך:

-וועבקיט-אָופּאַסאַטי: 0.5;
-מאַז-אָופּאַסאַטי: 0.5;
אָופּאַסאַטי: 0.5;

קעסיידער שטעלן דעם בלעטערער פּרעפיקסעס ערשטער, און די גילטיק קסס 3 פאַרמאָג לעצט.

פּרובירן דעם בלעטערער פּרעפיקסעס אין עלטערע מאָזיללאַ און וועבקיט בראַוזערז.

איר קענען מאַכן בילדער טראַנספּאַרענט אויך

שטעלן די אָופּאַסאַטי אויף די בילד זיך און עס וועט וועלקן אין די הינטערגרונט. דעם איז טאַקע נוציק פֿאַר הינטערגרונט בילדער .

און אויב איר שטעלן אין אַן אַנקער טאַש איר קענען מאַכן כאַווער יפעקס נאָר דורך טשאַנגינג די אָופּאַסאַטי פון די בילד.

a: hover img {
פילטער: אַלף (אָופּאַסאַטי = 50)
פילטער: פּראַג: DXImageTransform.Microsoft.Alpha (opacity = 50)
-מאַז-אָופּאַסאַטי: 0.5;
-וועבקיט-אָופּאַסאַטי: 0.5;
אָופּאַסאַטי: 0.5;
}

אַפעקץ דעם HTML:

פּרובירן די אויבן סטיילז און HTML אין קאַמף.

שטעלן טעקסט אויף דיין בילדער

מיט אָופּאַסאַטי, איר קענען שטעלן טעקסט איבער אַ בילד און האָבן די בילד דערשייַנען צו פיידן ווו דער טעקסט איז.

דעם טעכניק איז אַ ביסל טריקי, ווייַל איר קענען ניט פשוט וועלקן די בילד, ווי אַז וועט וועלקן די גאנצע בילד. און איר קענט נישט וועלקן די טעקסט קעסטל , ווייַל דער טעקסט וועט דאָך אויך זיין.

1. ערשטער איר מאַכן אַ קאַנטיינער דיוו און שטעלן דיין בילד ין:

   
   

2. גיי די בילד מיט אַ ליידיק דיוו - דאָס איז וואָס איר וועט מאַכן טראַנספּעראַנט.

   
   
   

3. די לעצטע זאַך איר שטעלן אין דיין HTML איז די דיוו מיט דיין טעקסט אין עס:

   
   
   
   דאס איז מיין הונט שאַסטאַ. איז נישט ער קיוט!

4. איר סטיל עס מיט קסס פּאַזישאַנינג, צו שטעלן די טעקסט אויבן די בילד. איך געשטעלט מיין טעקסט אויף די לינקס זייַט, אָבער איר קענען לייגן עס אויף די רעכט דורך טשאַנגינג די צוויי לינקס: 0; פּראָפּערטיעס צו רעכט: 0; .

   #image {
   פּאָסטן: relative;
   ברייט: 170 פּקס;
   הייך: 128 פּקס;
   גרענעץ: 0;
   }
   #text {
   שטעלע: אַבסאָלוט;
   שפּיץ: 0;
   לינקס: 0;
   ברייט: 60 פּקס;
   height: 118px;
   background: #fff;
   padding: 5px;
   }
   #text {
   פילטער: אַלף (אָופּאַסאַטי = 70);
   פילטער: פּראַג: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -מאָז-אָופּאַסאַטי: 0.70;
   אָופּאַסאַטי: 0.7;
   }
   #words {
   שטעלע: אַבסאָלוט;
   שפּיץ: 0;
   לינקס: 0;
   ברייט: 60 פּקס;
   height: 118px;
   הינטערגרונט: טראַנספּעראַנט;
   padding: 5px;
   }

זען ווי עס קוקט