সিএসএস ব্যাকগ্রাউন্ড স্বচ্ছতা। স্বচ্ছ ব্যাকগ্রাউন্ড বা সিএসএস পাঠ্য

সিএসএস 3 ওয়েব ডিজাইনার আবির্ভাব সঙ্গে নানাভাবে কাজ সহজ এবং আরো যৌক্তিক পরিণত হয়েছে: সব পরে, আপনি এখন সত্যিই সহজে কোন বস্তুর কাস্টমাইজ করতে পারেন, কম ঘন ঘন জাভাস্ক্রিপ্ট অবলম্বন। ধরুন, আপনি পটভূমির স্বচ্ছতা ঠিক করতে যাক - সিএসএস অবিলম্বে বিভিন্ন অপশন উপলব্ধ করা হয়।

পটভূমি বৈশিষ্ট্যাবলী একটি সেট দ্বারা সংজ্ঞায়িত (পটভূমি চিত্র, পটভূমি অবস্থানে রয়েছে এমন , পটভূমি আকার, পটভূমি-পুনরাবৃত্তি, পশ্চাদপট-সংযুক্তি, পটভূমি বংশোদ্ভূত, পটভূমি-ক্লিপ, পটভূমি-রঙ), প্রতিটি যা আলাদাভাবে বরাদ্দ করা যেতে পারে বা মিশ্র অ্যাট্রিবিউট অধীনে পটভূমি। আমাদের বিস্তারিতভাবে তাদের প্রতিটি পরীক্ষা করে দেখি।

অ্যাট্রিবিউট পটভূমি-রঙ

সিএসএস সালে পটভূমির রঙ একটি হেক্স কোড, রঙ নাম অথবা আরজিবি-এন্ট্রি ব্যবহার করছে: বিভিন্নভাবে নির্ধারণ করা যাবে। সিএসএস 3 এটা RGBA সঙ্গে আরজিবি-রেকর্ডিং বিকল্প পরিবর্তে ব্যবহার করা সম্ভব হয়ে ওঠে।

পটভূমি-রঙ:: # FFDAB9 হেক্স রঙের কোড জাফরি পর সম্পত্তিতে নথিভুক্ত করা হয়। এই এন্ট্রি টি অক্ষর একই জোড়া হন, কোড সাধারণত একটু কাটা: # ccff00 # cf0 হিসেবে লেখা যেতে পারে:

শরীর {পটভূমি-রঙ: # cf0 ;}।

নাম সবচেয়ে বহিরাগত রং এমনকি হয়। উদাহরণস্বরূপ, মান লাল এবং সাদা আপনি NavajoWhite (#FFDEAD) অথবা Honeydew2 (# E0EEE0) ব্যবহার করতে পারেন ছাড়াও:

শরীর {পটভূমি-রঙ: রক্তবর্ণ; }।

আধুনিক বিকল্প আরজিবি বা RGBA এন্ট্রি আপনি না শুধুমাত্র রঙ কিন্তু সিএসএস পটভূমির স্বচ্ছতা নির্দিষ্ট করার অনুমতি দেয়, কিন্তু পদ্ধতিটি কেবল ইন্টারনেট সংস্করণ 9 থেকে পুরানো কাজ করে। অন্যান্য ব্রাউজার স্বচ্ছতা সাথে স্বাভাবিক সংস্করণ স্বীকার করে। W3C এর মান অনুযায়ী এটা এখনও আরও স্বাভাবিক আরজিবি পরিবর্তে RGBA ব্যবহার করা বাঞ্ছনীয় নয়।

RGBA পটভূমিতে গত মান এবং 1 (অস্বচ্ছ) এর 0 (স্বচ্ছ) থেকে অস্বচ্ছতা সেট করে।

কিছু অস্বাভাবিক মান আছে। পটভূমির রঙ HSL এবং HSLA ব্যবহার নির্ধারণ করা যাবে। উভয় সিএসএস 3 যোগ করা হয় নি, সেইজন্য এবং ইন্টারনেট সংস্করণ 9 বা উচ্চতর দ্বারা সমর্থিত নয়। Embodiments অভিন্ন আরজিবি বা RGBA মাত্র ভিন্ন বিন্যাসে: হিউ (আলোছায়া - রঙ চাকা উপর মান, ডিগ্রী দেওয়া হয়), পরিপূর্ণ (সম্পৃক্তি - শতকরা হিসাবে রঙ তীব্রতা, 0 থেকে 100 পর্যন্ত), লঘিমা (লঘিমা - উজ্জ্বলতা, একভাবে মাপা প্যারামিটার পরিপূর্ণ )।

অ্যাট্রিবিউট পটভূমি চিত্র

সবচেয়ে স্বচ্ছ পটভূমি ক্রস ব্রাউজার সংস্করণ - এই ছবিটি ব্যবহার। সিএসএস 3, আপনি আরও বেশি ইমেজ সেট করতে পারেন, এই একটি কমা মাধ্যমে সম্পন্ন করা হয়। উদাহরণ:

{পটভূমি-বডি ছবি: URL (bg1.png), URL (bg2.png)}।

এমনকি IE8 সমর্থনকারী এই পদ্ধতি। বিন্যাস ব্যবহৃত রাবার পটভূমিতে বেশ কিছু চিত্র। গুরুত্বপূর্ণ হল, কোনো ইমেজ ব্যবহার এবং CSS পটভূমি রং নির্ধারণ, ব্যবহারকারীরা কেবল একটি চিত্র আপলোড করতে করতে ভুলবেন না।

অ্যাট্রিবিউট পটভূমি অবস্থানে রয়েছে এমন

আপনি পটভূমির ইউনিট সেট করতে ইমেজ ব্যবহার করেন তাহলে, সিএসএস আপনি স্ক্রীনের যেকোনো জায়গায় ইমেজ অবস্থান করতে পারবেন। ডিফল্টরূপে, ইমেজ উপরের বাম প্রান্তে অবস্থিত। অ্যাট্রিবিউট পারেন মৌখিক নির্দেশাবলী (শীর্ষ, নীচে, বাম, ডান), একটি সংখ্যাসূচক (সুদ, পিক্সেল এবং অন্যান্য একক) লাগে। এই ক্ষেত্রে, আপনি দুই মূল্যবোধ, অনুভূমিক এবং উল্লম্ব নির্দিষ্ট করতে হবে:

শরীর {পটভূমি অবস্থানে রয়েছে এমন: ডান কেন্দ্র ;} - এই উদাহরণে, প্যাটার্ন পাতা, একই ছবিতে দূরত্ব শীর্ষ এবং নীচের অংশ ডান দিকে অবস্থিত করা হবে না।

অ্যাট্রিবিউট পটভূমি আকার

কখনও কখনও এটি সিএসএস ব্যাকগ্রাউন্ড প্রসারিত বা তার আকার হ্রাস করা প্রয়োজন। এই কাজের জন্য, অ্যাট্রিবিউট পটভূমি আকার, এবং ব্যাকগ্রাউন্ড পিক্সেল বা শতকরা মধ্যে নির্ধারণ করা যাবে আকার, এবং অন্য কোন ইউনিট ব্যবহার করুন।

এই বৈশিষ্ট্য সঙ্গে, সেখানে কিছু সমস্যা আছে: এর জন্য ব্রাউজার উপসর্গ 'র পূর্ববর্তী সংস্করণে একটি পটভূমি সঠিক প্রদর্শন ব্যবহৃত হবে। অবশ্যই, বর্তমান সংস্করণ সম্পূর্ণরূপে এই বৈশিষ্ট্য সমর্থন করে এবং নির্দিষ্ট বৈশিষ্ট্যের জন্য প্রয়োজন উধাও হয়ে গেছে।

অ্যাট্রিবিউট পশ্চাদপট-সংযুক্তি

এই বৈশিষ্ট্য পশ্চাদপট চিত্র স্ক্রোল করার সময় আচরণকে নির্দিষ্ট করে। সুতরাং, 3 মান (উত্তরাধিকারী, গুণাবলী এই প্রবন্ধে আলোচনা সকলের জন্য মোট ছাড়া) নিতে পারেন:

• নির্দিষ্ট - ফিক্সড পটভূমিতে ছবি তোলে;
• স্ক্রল - উপাদান বাকি সঙ্গে পটভূমি স্ক্রোল;
• স্থানীয় - যদি স্ক্রলিং সামগ্রী নেই পটভূমিতে ইমেজ স্ক্রল করা হয়। পটভূমি যে ফ্রেম বিষয়বস্তু ছাড়াইয়া যায় সংশোধন করা হয়েছে।

ব্যবহারের উদাহরণ:

শরীর {পশ্চাদপট-সংযুক্তি সংশোধন}।

বর্তমানে, ফায়ারফক্স গত সম্পত্তি (স্থানীয়) সমর্থন করে না।

অ্যাট্রিবিউট পটভূমি বংশোদ্ভূত

এই বৈশিষ্ট্য পজিশনিং উপাদান জন্য দায়ী। প্রারম্ভিক ব্রাউজার উপসর্গ ব্যবহার করার প্রয়োজন। সম্পত্তি নিজেই তিন প্যারামিটার আছে:

• প্যাডিং বাক্স প্রান্ত প্যাটার্ন আপেক্ষিক অবস্থান করে, যখন একাউন্টে ফ্রেমের বেধ গ্রহণ;
• সীমান্ত বাক্স বৈশিষ্ট্য যে আগের সীমা রেখা হতে পারে থেকে আলাদা সম্পূর্ণ বা আংশিকভাবে প্যাটার্ন ওভারল্যাপ;
• বিষয়বস্তু বাক্স পজিশনিং ইমেজ এর বিষয়বস্তু pryavyazyvaya।

আপনি একাধিক মান উল্লেখ করেন, তারপর ব্রাউজার তাদের নিজস্ব পদ্ধতিতে প্রতিক্রিয়া করতে পারেন: Firefox এবং অপেরা শুধুমাত্র প্রথম বিকল্প বোঝা।

অ্যাট্রিবিউট পটভূমি-পুনরাবৃত্তি

একটি নিয়ম হিসাবে, যদি ব্যাকগ্রাউন্ড ইমেজ উল্লেখ করা হয়, এটা অনুভূমিকভাবে বা উল্লম্বভাবে পুনরাবৃত্তি করা উচিত নয়। এই জন্য এবং অ্যাট্রিবিউট পটভূমি-পুনরাবৃত্তি করতেন। সুতরাং, ব্লক পটভূমি, সিএসএস যা একটি সম্পত্তি রয়েছে বিভিন্ন পরামিতি এক আছে করতে পারেন:

• নো-পুনরাবৃত্তি - ছবিটি একটি একক সংস্করণে একটি পৃষ্ঠায় প্রদর্শিত হবে;
• পুনরাবৃত্তি - পটভূমি x এবং y পুনরাবৃত্তি করা হয়;
• পুনরাবৃত্তি-X - শুধুমাত্র অনুভূমিকভাবে;
• পুনরাবৃত্তি-Y - শুধুমাত্র উল্লম্বভাবে;
• স্থান - পটভূমি পুনরাবৃত্তি করা হয়, কিন্তু যদি স্থান ছবির মধ্যে পূরণ করা অসম্ভব খালি প্রদর্শিত;
• বৃত্তাকার - ইমেজ স্কেল করা হয়, যদি পুরো ছবি সমগ্র এলাকা ভরাট করে না।

গুণাবলীর উদাহরণ:

শরীর {পটভূমি-পুনরাবৃত্তি: নং পুনরাবৃত্তি পুনরাবৃত্তি} - অনুরূপ পটভূমি-পুনরাবৃত্তি: পুনরাবৃত্তি-Y।

সিএসএস 3 একাধিক ইমেজ জন্য মান যখন পরামিতি কমা দ্বারা পৃথক তালিকা উল্লেখ করতে পারেন।

অ্যাট্রিবিউট পশ্চাদপট-ক্লিপ

এই বৈশিষ্ট্য গণ্ডি অধীনে পটভূমি আচরণ সংজ্ঞায়িত (যেমন, ডটেড ফ্রেম ক্ষেত্রে):

• প্যাডিং বাক্স - পটভূমি ব্লক অভ্যন্তর প্রদর্শিত;
• সীমান্ত বাক্স - ইমেজ কাঠামোর আওতায় আসে;
• বিষয়বস্তু বাক্স - পটভূমিতে ছবি শুধুমাত্র বিষয়বস্তু মধ্যে প্রদর্শিত হবে।

ব্যবহারের উদাহরণ:

শরীর {পটভূমি-ক্লিপ: content- বক্স;}।

Chrom এবং সাফারি -webkit- উপসর্গ প্রয়োজন।

অস্পষ্টতা গুণাবলী এবং ফিল্টার

অস্বচ্ছতা বৈশিষ্ট্য আপনি পটভূমির স্বচ্ছতা সেট করতে দেয় - সিএসএস সম্পত্তি সব ব্রাউজারে কাজ করবে। মান 0.0 থেকে 1.0 সমেত সীমার মধ্যে সেট করা হয়। এই ক্ষেত্রে, আপনি সিএসএস পটভূমির স্বচ্ছতা সেট করতে পারেন 0.3 পরিবর্তে কোন পূর্ণসংখ্যা মান .3 লিখতে যথেষ্ট:

.block {পটভূমি-চিত্র: URL ( img.png); অস্বচ্ছতা: .3;}।

পটভূমি অস্বচ্ছতা সেট করতে, সিএসএস নবম সংস্করণ নীচে ইন্টারনেট এমনকি উপযুক্ত, ফিল্টার অ্যাট্রিবিউট ব্যবহার করুন:

.block {পটভূমি-চিত্র: URL ( img.png); ফিল্টার: আলফা (অস্বচ্ছতা = 30)}।

এই ক্ষেত্রে, অস্বচ্ছতা মানের মধ্যে 0 এবং 100 নোট সেট করা হয় যে অস্বচ্ছতা RGBA উত্তরাধিকার মাধ্যমে বিভিন্ন স্বচ্ছতা সেটিংস বৈশিষ্ট্যাবলী যখন অস্বচ্ছতা ব্যবহার পটভূমি হয়ে স্পষ্ট শুধুমাত্র, কিন্তু ইউনিট ভিতরে সব উপাদান।

সর্বদা সিআইএস ব্রাউজার এবং অন্য সব দেশের জন্য আপনার ব্যবহারের পরিসংখ্যান সবসময় নজর রাখি। সব ডিটিপি এর সবচেয়ে বড় সমস্যা - অর্থাৎ এর পুরোনো সংস্করণগুলি, তারা আপনাকে পূর্ণ ব্যাপ্তি সিএসএস 3 ব্যবহার করতে অনুমতি দেয় না। বিন্যাস বিশেষ যে পরিষেবাগুলি পরীক্ষা আপনার ব্রাউজার কোনো সিএসএস সম্পত্তি সমর্থন কিনা ব্যবহার করতে ভুলবেন না। আপনি ব্রাউজার পুরোনো সংস্করণগুলি ইনস্টল করতে না পারেন, একটি পরিষেবা যা অনলাইন একাধিক ব্রাউজার সাইটের কাজ চেক করবে এটি।