আপনার পৃষ্ঠভূমি স্বচ্ছ
আপনি সহজেই প্রিন্ট ডিজাইনে যা করতে পারেন কিন্তু ওয়েবে কোনও চিত্র বা রঙের ব্যাকগ্রাউন্ডে ওভারলে টেক্সট নাও করতে পারেন, এবং সেই ছবিটির স্বচ্ছতা পরিবর্তন করুন যাতে পাঠ্যটি পটভূমিতে ফেইড করে। কিন্তু CSS3 এ একটি সম্পত্তি রয়েছে যা আপনাকে আপনার উপাদানের অপাসিটি পরিবর্তন করতে দেবে যাতে তারা বিবর্ণ এবং নিঃশেষ হয়ে যায়: অপাসিটি।
অপাসিটি সম্পত্তি কীভাবে ব্যবহার করবেন
অপাসিটি সম্পত্তি 0.0 থেকে 1.0 পর্যন্ত স্বচ্ছতার পরিমাণের একটি মান নেয়।
0.0 হয় 100% স্বচ্ছ - যে উপাদান নীচে কিছু সম্পূর্ণরূপে মাধ্যমে দেখাবে। 1.0 হল 100% অস্বচ্ছ - উপাদানটি নীচের নীচের অংশ দেখাবে না।
তাই 50% স্বচ্ছতার একটি উপাদান সেট করতে, আপনি লিখবেন:
অস্বচ্ছতা: 0.5;
কর্মে অপাসিটি কিছু উদাহরণ দেখুন
পুরোনো ব্রাউজারে টেস্ট করতে ভুলবেন না
IE 6 না 7 সমর্থনও নেই CSS3 অপাসিটি সম্পত্তি। কিন্তু আপনি ভাগ্যের বাইরে নন। পরিবর্তে, IE একটি মাইক্রোসফ্ট শুধুমাত্র সম্পত্তি আলফা ফিল্টার সমর্থন করে। IE এ আলফা ফিল্টার 0 (সম্পূর্ণ স্বচ্ছ) থেকে 100 (সম্পূর্ণ অস্বচ্ছ) থেকে মান গ্রহণ করুন। সুতরাং, IE আপনার স্বচ্ছতা পেতে, আপনি 100 দ্বারা আপনার অপাসিটি সংখ্যাবৃদ্ধি করা উচিত এবং আপনার শৈলী একটি আলফা ফিল্টার যোগ করুন:
ফিল্টার: আলফা (অপাসিটি = 50);
কর্মের মধ্যে আলফা ফিল্টার দেখুন (শুধুমাত্র IE)
এবং ব্রাউজার পূর্বরূপ ব্যবহার করুন
আপনি -moz- এবং -webkit- উপসর্গগুলি ব্যবহার করা উচিত যাতে মোজিলা ও ওয়েবকিট ব্রাউজারের পুরোনো সংস্করণগুলি এটি সমর্থন করে:
-বিবেক-অপাসিটি: 0.5;
-মোজ-অপাসিটি: 0.5;
অস্বচ্ছতা: 0.5;
সর্বদা ব্রাউজার প্রিফিক্সগুলি সর্বদা রাখুন, এবং বৈধ CSS3 সম্পত্তিটি শেষ।
পুরোনো মোজিলা এবং ওয়েবকিট ব্রাউজারগুলিতে ব্রাউজার প্রিফিক্সগুলি পরীক্ষা করুন।
আপনি ইমেজ ট্রান্সপারেন্ট খুব করতে পারেন
ছবিটির অপাসিটিটি সেট করুন এবং এটি পটভূমিতে বিবর্ণ হবে। এটি ব্যাকগ্রাউন্ড ইমেজের জন্য সত্যিই দরকারী।
এবং যদি আপনি একটি নোঙ্গর ট্যাগ যোগ করুন আপনি ছবির অপাসিটি পরিবর্তন করে হভার প্রভাব তৈরি করতে পারেন।
একটি: হভার img {
ফিল্টার: আলফা (অপাসিটি = 50)
ফিল্টার: প্রগিড: DXImageTransform.Microsoft.Alpha (অপাসিটি = 50)
-মোজ-অপাসিটি: 0.5;
-বিবেক-অপাসিটি: 0.5;
অস্বচ্ছতা: 0.5;
}
এই এইচটিএমএল প্রভাবিত করে:
উপরে শৈলী এবং এইচটিএমএল কর্ম পরীক্ষা
আপনার চিত্রগুলিতে টেক্সট রাখুন
অপাসিটি সঙ্গে, আপনি একটি ইমেজ উপর টেক্সট স্থাপন করতে পারেন এবং ইমেজ যে টেক্সট আছে যেখানে বিবর্ণ প্রদর্শিত হবে।
এই কৌশলটি একটু জটিল, কারণ আপনি কেবল ছবিটি বিবর্ণ করতে পারবেন না, যেটা পুরো ছবিটি বিবর্ণ হবে। এবং আপনি টেক্সট বক্স বিবর্ণ করা যাবে না, টেক্সট হিসাবে ভাল হিসাবে বিবর্ণ হবে, কারণ।
- প্রথমে আপনি একটি ধারক DIV তৈরি করুন এবং ভিতরে আপনার চিত্র রাখুন:
- একটি খালি DIV- সঙ্গে ইমেজ অনুসরণ করুন এই আপনি স্বচ্ছ হবে কি।
- আপনি আপনার এইচটিএমএল যোগ সর্বশেষ জিনিস এটি আপনার টেক্সট সঙ্গে DIV হয়:
এই আমার কুকুর Shasta হয় সে কি সুন্দর না! - আপনি সিএসএস পজিশনিং দিয়ে এটি শৈলী, ইমেজ উপরে টেক্সট স্থাপন। আমি বাম পাশে আমার পাঠ্যটি স্থাপন করেছি, তবে আপনি বামে দুটি পরিবর্তন করে ডানদিকে এটি রাখতে পারেন: 0; ডান দিকের বৈশিষ্ট্য: 0; ।
#image {
অবস্থান: আপেক্ষিক;
প্রস্থ: 170px;
উচ্চতা: 128px;
মার্জিন: 0;
}
#text {
অবস্থান: পরম;
শীর্ষ: 0;
বাম: 0;
প্রস্থ: 60px;
উচ্চতা: 118px;
পটভূমি: #fff;
প্যাডিং: 5px;
}
#text {
ফিল্টার: আলফা (অপাসিটি = 70);
ফিল্টার: প্রগিড: DXImageTransform.Microsoft.Alpha (অপাসিটি = 70);
-মোজ-অপাসিটি: 0.70;
অস্বচ্ছতা: 0.7;
}
# ওয়ার্ডস {
অবস্থান: পরম;
শীর্ষ: 0;
বাম: 0;
প্রস্থ: 60px;
উচ্চতা: 118px;
পটভূমি: স্বচ্ছ;
প্যাডিং: 5px;
}
দেখুন কিভাবে এটি দেখায়