একটি ওয়েব পৃষ্ঠায় একটি ব্যাকগ্রাউন্ড ওয়াটার্মার্ক নির্মাণের জন্য টিপস

সিএসএস এর সাথে কৌশল প্রয়োগ করুন

আপনি যদি কোনও ওয়েবসাইট ডিজাইন করছেন, তাহলে ওয়েব পেজে স্থির ব্যাকগ্রাউন্ড ইমেজ বা ওয়াটারমার্ক কিভাবে তৈরি করবেন তা জানতে আগ্রহী হতে পারেন। এটি একটি সাধারণ ডিজাইন চিকিত্সা যা বেশ কিছু সময় ধরে অনলাইনে জনপ্রিয় হয়েছে। এটি আপনার ওয়েব ডিজাইনার ব্যাগ মধ্যে একটি সহজ প্রভাব আছে।

যদি আপনি আগে এই না আগে বা না ভাগ্যের আগে এটি চেষ্টা করেছেন, প্রক্রিয়া ভয় দেখানো হতে পারে, কিন্তু এটা আসলে খুব কঠিন সব এ নয়। এই সংক্ষিপ্ত টিউটোরিয়ালের মাধ্যমে, আপনি CSS ব্যবহার করে কয়েক মিনিটের মধ্যে কৌশলটি মাস্টার করার জন্য প্রয়োজনীয় তথ্য পাবেন।

শুরু হচ্ছে

ব্যাকগ্রাউন্ড ইমেজ বা ওয়াটারমার্ক (যা সত্যিই খুব হালকা ব্যাকগ্রাউন্ড ইমেজ) মুদ্রিত ডিজাইনের একটি ইতিহাস আছে। তাদের অনুলিপি থেকে প্রতিরোধ করার জন্য ডকুমেন্টগুলি তাদের উপরে ওয়াটারমার্ক অন্তর্ভুক্ত করেছে। উপরন্তু, অনেক flyers এবং ব্রোশার মুদ্রিত টুকরা জন্য নকশা অংশ হিসাবে বড় ব্যাকগ্রাউন্ড ইমেজ ব্যবহার। ওয়েব নকশা দীর্ঘ মুদ্রণ এবং ব্যাকগ্রাউন্ড ইমেজ থেকে শৈলী ধার করা হয় এই ঋণ শৈলী এক।

এই বড় ব্যাকগ্রাউন্ড ইমেজগুলি নিম্নলিখিত তিনটি সিএসএস শৈলী বৈশিষ্ট্য ব্যবহার করে তৈরি করা সহজ।

পশ্চাদপট-চিত্র

আপনি চিত্রটি সংজ্ঞায়িত করতে ব্যাকগ্রাউন্ড-ইমেজ ব্যবহার করবেন যা আপনার ওয়াটারমার্ক হিসাবে ব্যবহৃত হবে। এই শৈলীটি কেবলমাত্র "চিত্র" নামে একটি ডিরেক্টরি সম্ভবত আপনার সাইটে একটি ইমেজ লোড করতে একটি ফাইল পাথ ব্যবহার করে।

ব্যাকগ্রাউন্ড-ইমেজ: url (/images/page-background.jpg);

এটি গুরুত্বপূর্ণ যে ইমেজটি স্বাভাবিক চিত্রের চেয়ে হালকা বা আরো স্বচ্ছ। এটি এমন "ওয়াটারমার্ক" তৈরি করবে যা একটি আধা-স্বচ্ছ ইমেজ টেক্সট, গ্রাফিক্স এবং ওয়েব পৃষ্ঠার অন্যান্য প্রধান উপাদানগুলির পিছনে রয়েছে। এই ধাপ ছাড়াই, ব্যাকগ্রাউন্ড ইমেজ আপনার পৃষ্ঠার তথ্যের সাথে প্রতিদ্বন্দ্বিতা করবে এবং এটি পড়তে কঠিন হবে।

অ্যাডোব ফটোশপের মত কোনও সম্পাদনা প্রোগ্রামে আপনি ব্যাকগ্রাউন্ড ইমেজটি সামঞ্জস্য করতে পারেন।

পটভূমি পুনরাবৃত্তি

পটভূমি পুনরাবৃত্ত সম্পত্তি পরবর্তী আসে। আপনি যদি আপনার ইমেজটি বড় ওয়াটারমার্ক-স্টাইল গ্রাফিক করতে চান তবে আপনি এই প্রোপার্টিটি ব্যবহার করতে পারবেন যে ছবিটি শুধুমাত্র একবার একবার দেখাবে

পটভূমি-পুনরাবৃত্তি: কোন-পুনরাবৃত্তি;

"নন-পুনরাবৃত্তি" সম্পত্তি ছাড়া, ডিফল্ট হল যে ছবিটি আবার পৃষ্ঠায় পুনরাবৃত্তি করবে। এটি বেশিরভাগ আধুনিক ওয়েবপৃষ্ঠা ডিজাইনে অনাকাঙ্ক্ষিত, তাই এই শৈলীটিকে আপনার CSS এ অপরিহার্য মনে করা উচিত।

পৃষ্ঠভূমি সংযুক্তি

ব্যাকগ্রাউন্ড-সংযুক্তি এমন একটি সম্পত্তি যা অনেক ওয়েব ডিজাইনার ভুলে যায়। এটি ব্যবহার করে যখন আপনি "স্থির" সম্পত্তি ব্যবহার করেন তখন আপনার পটভূমি চিত্রটিকে স্থির রাখে। এটি এমন একটি ওয়াটারমার্কের চিত্র যা পৃষ্ঠায় সংশোধন করে।

এই সম্পত্তি জন্য ডিফল্ট মান "স্ক্রল।" আপনি যদি একটি পটভূমি- সংযুক্তি মান নির্দিষ্ট না করেন, তবে পৃষ্ঠার বাকি অংশের সাথে ব্যাকগ্রাউন্ড স্ক্রোল হবে।

পটভূমি- সংযুক্তি: নির্দিষ্ট;

পশ্চাদপট-সাইজ

ব্যাকগ্রাউন্ড-আকার একটি নতুন CSS সম্পত্তি। এটি আপনাকে দেখতে পাওয়া ভিউপোর্টের উপর ভিত্তি করে একটি ব্যাকগ্রাউন্ডের আকার সেট করতে দেয়। এটি প্রতিক্রিয়াশীল ওয়েবসাইটগুলির জন্য খুবই সহায়ক যা বিভিন্ন ডিভাইসগুলিতে বিভিন্ন আকারে প্রদর্শন করবে।

পটভূমি-আকার: আবরণ;

আপনি এই সম্পত্তি জন্য ব্যবহার করতে পারেন দুটি সহায়ক মূল্য অন্তর্ভুক্ত:

আপনার পৃষ্ঠায় CSS যোগ করা

আপনি উপরের বৈশিষ্ট্য এবং তাদের মান বুঝতে পরে, আপনি আপনার ওয়েবসাইট থেকে এই শৈলী যোগ করতে পারেন।

যদি আপনি একটি একক পৃষ্ঠা সাইট তৈরি করেন তবে আপনার ওয়েব পৃষ্ঠার HEAD এর নীচে যোগ করুন। আপনি একটি মাল্টি পৃষ্ঠা সাইট নির্মাণ এবং একটি বহিস্থিত শীট শক্তি সুবিধা নিতে চান তাহলে একটি বহিরাগত স্টাইল শীট এর CSS শৈলী এটি যোগ করুন।

<শৈলী>
শরীর {
ব্যাকগ্রাউন্ড-ইমেজ: url (/images/page-background.jpg);
পটভূমি-পুনরাবৃত্তি: কোন-পুনরাবৃত্তি;
পটভূমি- সংযুক্তি: নির্দিষ্ট;
পটভূমি-আকার: আবরণ;
}
// ->

আপনার ব্যাকগ্রাউন্ড ইমেজটি নির্দিষ্ট ফাইলের নাম এবং আপনার সাইটের সাথে সম্পর্কিত ফাইল পাথের সাথে মেলে এমন URLটি পরিবর্তন করুন। আপনার নকশা হিসাবে উপযুক্ত হিসাবে অন্য কোন উপযুক্ত পরিবর্তন করুন এবং আপনার একটি ওয়াটারমার্ক থাকবে।

আপনি অবস্থান নির্দিষ্ট করতে পারেন, খুব

যদি আপনি আপনার ওয়েব পৃষ্ঠায় একটি নির্দিষ্ট স্থানে ওয়াটারমার্ক স্থাপন করতে চান, আপনি যে ভাল করতে পারেন। উদাহরণস্বরূপ, আপনি পৃষ্ঠার মাঝখানে বা সম্ভবত নিম্ন কোণে ওয়াটারমার্ক চান, উপরের কোণে বিরোধিতা করতে পারেন, যা ডিফল্ট।

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

পটভূমি-অবস্থান: কেন্দ্র;