CSS3 جي استحڪام بابت ڄاڻو

توهان جي پس منظر کي شفاف بڻائڻ

انهن شين مان جيڪي توهان آساني سان پرنٽ ڊزائن ۾ ڪري سگهو ٿا پر ويب تي نه ڪنهن تصوير يا رنگ جي پس منظر تي ٽيڪسٽ ڇپايو آهي، ۽ انهي تصوير جي شفافيت کي تبديل ڪري ٿي ته جيئن متن کي پس منظر ۾ ڦهليل آهي. پر CSS3 ۾ هڪ ملڪيت آهي جيڪا توهان کي پنهنجي عناصرن جي استحڪام کي تبديل ڪرڻ جي اجازت ڏيندو، انهي ڪري اهي انهن کي ختم ۽ ٻاهر نڪرڻ جي اجازت ڏيندو: استحڪام.

معيشت پراڊڪٽ کي ڪيئن استعمال ڪجي

آپريشن جي ملڪيت 0.0 کان 1.0 کان شفافيت جي قيمت حاصل ڪري ٿو.

0.0 100٪ شفاف آهي، انهي عنصري کان هيٺ هر شيء مڪمل طور تي ظاهر ڪندي. 1.0 100٪ ويزا آهي- عنصر جي هيٺان ڪجھ به نه ڏيکاريندو.

تنهن ڪري ھڪڙو عنصر 50٪ شفاف ڪرڻ لاء، توھان لکي سگھوٿا:

استحڪام: 0.5؛

عمل ۾ استحڪام جي ڪجهه مثال ڏسو

پراڻن برائوزرن ۾ جاچ ٿيڻ جي پڪ ٿيڻ

نه ئي IE 6 ۽ نه 7 جي CSS3 استحڪام ملڪيت جي سپورٽ. پر تون قسمت کان ٻاهر نه آهين. انهي جي بدران، Microsoft هڪ واحد واحد ملڪيت الفا فلٽر کي سپورٽ ڪري ٿو. الفا فلٽر ۾ IE کان 0 (مڪمل طور تي شفاف) کان 100 (مڪمل طور تي ناپسنديده) کان قبول ڪن ٿا. تنهن ڪري، IE ۾ توهان جي شفافيت حاصل ڪرڻ لاء، توهان کي 100 کان پنهنجي افاديت وڌائڻ ۽ پنهنجي شيلين ۾ الفا فلٽر شامل ڪرڻ گهرجي:

فلٽر: الفا (opacity = 50)؛

عمل ۾ الفا فلٽر ڏسو (صرف IE)

۽ برائوزر جا منڍ (پريفڪس) استعمال ڪريو

توهان کي -moz- ۽ -kkit-prefixes استعمال ڪرڻ گهرجي، انهي ڪري ته موزلا ۽ ويبڪڪ برائوزر جي پراڻن ورزن ان کي پڻ سپورٽ ڪري ٿو:

-ٽيٽي-وابستگي: 0.5؛
-موز-استحڪام: 0.5؛
استحڪام: 0.5؛

هميشه برائوزر اڳوڻن کي وجھو، ۽ صحيح CSS3 ملڪيت آخري.

پراڻن مزيلا ۽ ويبڪٽائي برائوزرز ۾ برائوزر جا منڍ (آزمائشي) جاچ پڙتال ڪريو.

توهان تصويرون ٺاهي سگھو ٿا تصويرون

تصوير پاڻ کي استحڪام کي سيٽ ڪريو ۽ اهو پس منظر ۾ بيڪار ٿيندو. حقيقت ۾ پس منظر تصويرون لاء مفيد آهي.

۽ جيڪڏهن توهان هڪ لنگر جي ٽيگ ۾ شامل ڪيو ٿا ته توهان حور اثرات کي صرف تصوير جي استحڪام کي تبديل ڪري سگھو ٿا.

هڪ: حور احمد {
فلٽر: الفا (opacity = 50)
فلٽر: پروجيگڏ: DXImageTransform.Microsoft.Alpha (opacity = 50)
-موز-استحڪام: 0.5؛
-ٽيٽي-وابستگي: 0.5؛
استحڪام: 0.5؛
}

ھن HTML کي متاثر ڪيو:

مٿي ڏنل شارليٽس ۽ ايڊيو ايڪشن ۾ ٽيسٽ ڪريو.

توهان جي تصويرن تي ٽيڪس رک

استحڪام سان، توهان هڪ تصوير تي ٽيڪس رکي سگهو ٿا ۽ تصوير ظاهر ٿي ويندو آهي انهي جو متن ڪٿي آهي.

اهو ٽيڪنڪ ننڍڙو ننڍڙو آهي، ڇاڪاڻ ته توهان مڪمل طور تي تصوير کي ڇڪائي نه ٿا سگهون، ڇو ته اهو سڄو تصوير پورو ٿيندو. ۽ توهان کي ٽيڪسٽ باڪس کي ڌڪ نه ٿو ڏئي، ڇو ته ٽيڪسٽ به هن سان گڏ ڀڄندا ويندا.

1. پهرين توهان هڪ ڪنٽر ٺاهيو DIV ۽ پنهنجي تصوير اندر اندر رکي سگهو ٿا:

   
   

2. خالي تصوير سان خالي ڪريو DIV اهو آهي جيڪو توهان شفاف ڪندو.

   
   
   

3. جيڪو توهان جي HTML ۾ شامل ڪيو آهي اهو آخري شيء ان ۾ توهان جي لکت سان آهي:

   
   
   
   هي منهنجو ڪتو شيوار آهي. ڇا هو پياري نه آهي

4. توهان ان کي ايس ڊي ايس پوسٽنگنگ سان انداز لڳايو، تصوير جي مٿين ٽيڪنٽ کي رکڻ لاء. مون پنهنجي لکت کي کاٻي پاسي تي رکايو، پر توهان ان کي ٻه بائیں تبديل ڪندي درست ڪري سگهو ٿا: 0؛ حق تي ملڪيت: 0؛ .

   #image {
   جڳهه؛ مائٽ؛
   چوٿون: 170px؛
   اوچائي: 128px؛
   حاڪمن: 0؛
   }
   #text {
   پوزيشن: مطلق؛
   مٿي: 0؛
   کاٻي: 0؛
   چوٿون: 60px؛
   اوچائي: 118px؛
   پس منظر: #fff؛
   گنجائش: 5px؛
   }
   #text {
   فلٽر: الفا (opacity = 70)؛
   فلٽر: پروجيگڏ: DXImageTransform.Microsoft.Alpha (opacity = 70)؛
   -موز-اپوزيشن: 0.70؛
   خوبي: 0.7؛
   }
   #words {
   پوزيشن: مطلق؛
   مٿي: 0؛
   کاٻي: 0؛
   چوٿون: 60px؛
   اوچائي: 118px؛
   پس منظر: شفاف؛
   گنجائش: 5px؛
   }

ڏسو ته ڪيئن ڏسندو آهي