কিভাবে এইচটিএমএল এবং সিএসএস একটি ছবি পটভূমি করতে। 3 সহজ উপায়

প্যালেট থেকে ব্যাক প্ল্যানের রঙ সেট করে। উত্তরাধিকারীর রঙ সর্বদা পূর্বপুরুষের রঙের রঙের সাথে মিলিত হয়।
শুভেচ্ছা। এই প্রবন্ধে, আমি কেবলমাত্র এইচটিএমএল + সিএসএস (জেএস ব্যবহার না করেই) ব্যবহার করে পুরো পৃষ্ঠার ব্যাকগ্রাউন্ড হিসাবে একটি ছবিটিকে একটি চিত্র হিসাবে একটি চিত্র স্থাপন করতে প্রায় তিনটি উপায় বলতে চাই।

শুভেচ্ছা। এই প্রবন্ধে, আমি কেবলমাত্র এইচটিএমএল + সিএসএস (জেএস ব্যবহার না করেই) ব্যবহার করে পুরো পৃষ্ঠার ব্যাকগ্রাউন্ড হিসাবে একটি ছবিটিকে একটি চিত্র হিসাবে একটি চিত্র স্থাপন করতে প্রায় তিনটি উপায় বলতে চাই।

সুতরাং, আমরা নিম্নরূপ ব্যাকগ্রাউন্ড ইমেজ জন্য প্রয়োজনীয়তা:

  • 100% প্রস্থ এবং পৃষ্ঠাগুলির উচ্চতা আচ্ছাদিত
  • পটভূমি স্কেল যদি প্রয়োজন হয় (পটভূমি প্রসারিত বা পর্দার আকারের উপর নির্ভর করে সংকুচিত হয়)
  • ছবির অনুপাত পেস্ট করুন (দৃষ্টি অনুপাত)
  • ইমেজ পৃষ্ঠায় কেন্দ্রীভূত
  • পটভূমি স্ক্রোল কারণ না
  • সমাধান সর্বাধিক crossbrawser হয়
  • কোন অন্যান্য প্রযুক্তি সিএসএস ছাড়া ব্যবহার করা হয়

প্যালেট থেকে ব্যাক প্ল্যানের রঙ সেট করে। উত্তরাধিকারীর রঙ সর্বদা পূর্বপুরুষের রঙের রঙের সাথে মিলিত হয়।

পদ্ধতি 1.

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

একটি নির্দিষ্ট এবং কেন্দ্রিক পটভূমি ইনস্টল করুন, তারপরে ব্যবহার করে তার আকার সামঞ্জস্য করুন পটভূমি আকার: কভার .

এইচটিএমএল { 

পটভূমি-চিত্র: URL (চিত্র / plates.jpg);

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

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

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

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

-মোজ-ব্যাকগ্রাউন্ড-আকার: কভার;

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

পটভূমি আকার: কভার; 
} 

ডেমো

এই পদ্ধতি কাজ করে

  • ক্রোম (কোন সংস্করণ)
  • অপেরা 10+।

ফায়ারফক্স 3.6+.

সাফারি 3+।

IE 9+.

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

পটভূমি-চিত্র: URL (চিত্র / plates.jpg);

পদ্ধতি 2.

এই পদ্ধতিটি আইএমজি উপাদানটির ব্যবহারের জন্য সরবরাহ করে, যার আকারটি ব্রাউজার উইন্ডোটির আকারের উপর নির্ভর করে পরিবর্তিত হবে। ইমেজটি পূর্ণ পর্দায় প্রসারিত করতে, এটি 100% এর মান দিয়ে মিন-উচ্চতা এবং প্রস্থ সেট করতে হবে। এবং তাই ছবিটি মূলটির তুলনায় ছোট আকারে সংকুচিত হয় না, চিত্রের সমান প্রস্থের মূল্যের সাথে মিনি-প্রস্থ ইনস্টল করুন।

যদি উইন্ডো প্রস্থ চিত্রটির প্রস্থের চেয়ে কম হয় তবে মিডিয়া ক্যোয়ারীটি কেন্দ্রে ব্যাকগ্রাউন্ডটি সারিবদ্ধ করতে ব্যবহার করা হবে।

উত্তরাধিকারী।

<img src = "/ চিত্র / plates.jpg" ক্লাস = "ব্যাকগ্রাউন্ড" />

img.background { মিন-উচ্চতা: 100%; মিনি-প্রস্থ: 640px; প্রস্থ: 100%; উচ্চতা: অটো;

অবস্থান: নির্দিষ্ট; শীর্ষ: 0; বাম: 0;

/ * ইমেজ আকারের উপর নির্ভর করে * /

@Media পর্দা এবং (সর্বোচ্চ-প্রস্থ: 640px) { img.bg { и বাম: 50%; মার্জিন বাম: -320px; } } } ডেমো

পিতামাতার উপাদান সব বৈশিষ্ট্য উত্তরাধিকারী

এই পদ্ধতি কাজ করে:

ভাল ব্রাউজারের কোন সংস্করণ (ক্রোম, অপেরা, ফায়ারফক্স, সাফারি) IE 9+. и পদ্ধতি 3। . আরেকটি উপায় নিম্নরূপ: ইমেজটি <img /> পৃষ্ঠার উপরের বাম কোণে ফিক্স করুন এবং এটি 100% এর ন্যূনতম এবং মিন-উচ্চতা বৈশিষ্ট্যগুলি ব্যবহার করে প্রসারিত করুন। সত্য, এই পদ্ধতির সাথে, ছবিটি কেন্দ্রীয় নয়। কিন্তু এই সমস্যাটি <div /> এর ছবিটি মোড়ানো দ্বারা আবৃত করা হয়েছে, যা আমরা উইন্ডোটির আকারের 2 গুণ করে। এবং ইমেজ নিজেই আমরা প্রসারিত এবং কেন্দ্রে রাখা। <div class = "ব্যাকগ্রাউন্ড"> <img src = "/ চিত্র / plates.jpg" />

</ div> Div.background { <div class = "ব্যাকগ্রাউন্ড"> অবস্থান: নির্দিষ্ট;

শীর্ষ: -50%;

বাম: -50%; } প্রস্থ: 200%; উচ্চতা: 200%; }

img { অবস্থান: পরম; শীর্ষ: 0;

বাম: 0; ঠিক আছে: 0; :

নীচে: 0;

মার্জিন: অটো; মিনি-প্রস্থ: 50%; মিন-উচ্চতা: 50%; } .

এই পদ্ধতি ভাল ব্রাউজার এবং IE 8+ মধ্যে কাজ করে।

আমি এই তথ্য আপনার জন্য দরকারী হবে আশা করি। ব্যক্তিগতভাবে, আমি প্রায়ই এই পদ্ধতি ব্যবহার করে, বিশেষ করে প্রথম। অবশ্যই সিএসএসের সাথে পিছনের পটভূমিতে একটি চিত্র দেওয়ার অন্য উপায় রয়েছে। আপনি যদি তাদের সম্পর্কে জানেন, শেয়ার করুন, দয়া করে মন্তব্য করুন। পটভূমি রঙ এবং / অথবা একটি পৃষ্ঠা বা একটি পৃথক আইটেমের জন্য একটি ছবি সেট করুন যথেষ্ট সহজ। প্রধান জিনিসটি কোথায় এবং কীভাবে এটি করা যেতে পারে এবং সেইসাথে একটি রঙ কোড এবং / অথবা একটি ব্যাকগ্রাউন্ড ছবি থাকতে পারে তা জানতে হবে। এটা সম্ভব যে এই প্রবন্ধ থেকে আপনি অনেক কিছু শিখবেন, কিন্তু আমি বিশেষভাবে এটির জন্য এটি তৈরি করেছি। অতএব, সবকিছু যতটা সম্ভব এবং একযোগে বিস্তারিতভাবে সংক্ষিপ্ত হবে। প্রধান বিষয় হল যে আপনি কেবলমাত্র সামগ্রিক উপস্থাপনা এবং প্রস্তুত তৈরি উদাহরণগুলি পাবেন না, তবে এইচটিএমএল-তে কীভাবে পটভূমি তৈরি করবেন তাও বোঝা হবে। এইচটিএমএল পটভূমি সেট করতে ইন্টারমিডিয়েট ডকপট ব্যবহার করুন এবং আমি যে সঙ্গে শুরু হবে HTML5। সাইটের জন্য ব্যাকগ্রাউন্ড সেট করার কোন সম্ভাবনা নেই। এই বৈশিষ্ট্য সিএসএস সহ্য করার সিদ্ধান্ত নিয়েছে। অতএব, যদি আপনি নীচের ব্যবহার করার পরিকল্পনা করেন এবং আপনি একটি বৈধ পেতে চান » (সঠিক) কোড, আপনাকে ডকুমেন্টের ট্রানজিট টাইপ এ থাকতে হবে। এটি করার জন্য, আপনার ওয়েব পৃষ্ঠাটি নিম্নলিখিত লাইন দিয়ে শুরু করা উচিত: <! ডক্টাইপ এইচটিএমএল পাবলিক "- // W3C // DTD HTML 4.01 » স্থানান্তরিত // এন "" http://www.w3.org/tr/html4/loose.dtd ">

ব্যবহারিক ক্লাস জন্য সময়

কিভাবে একটি ওয়েব পেজে পটভূমি হয়? (#)আপনি এটি figured যদি, আসুন পটভূমি তৈরি করা হয় কিভাবে বুঝতে হবে। এবং এখানে প্রথম জিনিস উল্লেখ করা উচিত - এই মধ্যে পার্থক্য

পেছনের রঙ

পটভূমি ছবি

। শুরুতে যায়

পেছনের রঙ বাম: 50%; যা সব উপলব্ধ পাতা স্থান বা তার উপাদান বন্যা। এটি উপরে পুনরাবৃত্তি পটভূমি ছবি }

। দৃশ্যত, এটি নিম্নরূপ চিত্রিত করা যেতে পারে: অবস্থান: পরম; শীর্ষ: 0;

এইচটিএমএল ডকুমেন্ট এবং তার উপাদান ব্যাকগ্রাউন্ড

ব্যাকড্রপ কন্ট্রোলের প্রধান উপাদানগুলি হতাশ করার পরে, পাশাপাশি তাদের গুণাবলীগুলিতে সরাসরি একটি নির্দিষ্ট উদাহরণের বিশ্লেষণে এগিয়ে যান। নীচে দেখানো প্রোগ্রাম কোডে, আমি সমস্ত বর্ণিত উপাদানের সক্ষম করার চেষ্টা করেছি।

আপনি জানতে প্রয়োজন দ্বিতীয় জিনিস মধ্যে পার্থক্য

ডকুমেন্টের শরীর ঠিক আছে: 0; :

নথির উপাদান

ডকুমেন্টের শরীর

ওয়েব পেজ ট্যাগ এর এইচটিএমএল কোড নির্দেশিত

শরীর। যা ওয়েব পৃষ্ঠার সব কন্টেন্ট রয়েছে। স্পষ্টতই, নথির নথির পটভূমি স্বচ্ছ হতে পারে না। যদি নথির শরীরের পটভূমি নির্দিষ্ট না হয় তবে ব্রাউজার সেটিংসে নির্দিষ্ট ডিফল্ট মানটি ব্যবহার করা হয়। পৃষ্ঠা উপাদান ট্যাগ ভিতরে ভিতরে আছে }

। এটি উল্লেখযোগ্য যে আপনি নথির সমস্ত উপাদানের জন্য HTML ব্যবহার করে রঙ এবং / অথবা পটভূমি ছবিটি সেট করতে পারেন। উদাহরণস্বরূপ, পটভূমি ছবি শুধুমাত্র টেবিলের জন্য নির্দিষ্ট করা যেতে পারে। ডিফল্টরূপে, তারা সাধারণত একটি স্বচ্ছ পটভূমি আছে। অবস্থান: পরম; শীর্ষ: 0;

পটভূমি রঙ তৈরি করতে bgcolor বৈশিষ্ট্য

জিজ্ঞাসা করার জন্য

নথি বা তার উপাদান বৈশিষ্ট্য ব্যবহার করা হয় উচ্চতা: 200%; и পটভূমি ছবি bgcolor. , যেমন: <শরীর bgcolor = "# EC008C">

<! - নথি শরীর ->

</ Body>

এই ক্ষেত্রে, আমরা পুরো পৃষ্ঠার জন্য পটভূমি রঙ সেট করি। কিন্তু ট্যাগের জন্য পটভূমি রঙটি কিভাবে সেট করতে হয় তা একটি উদাহরণ টেবিল <Table bgcolor = "# EC008C"> <TR> <TD> ব্যাকগ্রাউন্ডের সাথে পাঠ্য </ TD> </ TR> </ টেবিল>

এটি উল্লেখযোগ্য যে টেবিলের পটভূমি রঙটি ট্যাগের সারিগুলির জন্যও নির্দিষ্ট করা যেতে পারে

Tr. এবং ট্যাগ তাদের কোষের জন্য টিডি।

কিভাবে রঙ কোড খুঁজে বের করতে? আপনি সম্ভবত লক্ষ্য করেছেন যে এইচটিএমএল রঙ বিশেষ সেট করা হয়েছে কোড এইচটিএমএল , যেমন:

# EC008C।

  • । কোডটি খুঁজে বের করার জন্য আপনার রঙের দরকার আপনি গ্রাফিক্স সম্পাদকদের একটি ব্যবহার করতে পারেন। উদাহরণস্বরূপ, ফটোশপে আপনি ব্যবহার করতে পারেন "
  • Eyedropper টুল।
  • (পিপেট)

ছবিতে একটি বিন্দু থেকে একটি রং পেতে। তারপরে, আপনাকে টুলবারে এবং খোলা উইন্ডোতে ফলাফলের রঙটি ক্লিক করতে হবে "

রঙ পিকার। (রঙ নির্বাচন) রঙ কোড কপি করুন। আমি আপনার মনোযোগ আকর্ষণ করি যে এই কোডটি একটি জ্যাকেট সাইন ছাড়াই হবে শুরুতে, এই সাইনটি ম্যানুয়ালি যোগ করার প্রয়োজন হবে।

উদাহরণস্বরূপ আপনি অনেকগুলি অনলাইন পরিষেবাদি ব্যবহার করতে পারেন: 
কাজ তাদের নীতি এমনকি সহজ - পছন্দসই রঙ ক্লিক করুন এবং এটি কোড পেতে। একটি ব্যাকগ্রাউন্ড ইমেজ তৈরি ব্যাকগ্রাউন্ড বৈশিষ্ট্য পাশাপাশি পটভূমি রঙ এবং ক্ষেত্রে ক্ষেত্রে
আপনি একটি বিশেষ বৈশিষ্ট্য ব্যবহার করতে হবে, যথা 
পটভূমি। 
<শরীরের পটভূমি = "/ 2014/06 / bg.jpg">

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

<টেবিল ব্যাকগ্রাউন্ড = "/ 2014/06 / bg.jpg"> <tr> <td> ব্যাকগ্রাউন্ডের সাথে পাঠ্য </ td> </ tr> </ twe> এইচটিএমএল এটি উল্লেখযোগ্য যে ব্যাকগ্রাউন্ড ছবিটি শুধুমাত্র পুরো এবং / অথবা তার পৃথক ঘর হিসাবে টেবিলের জন্য সেট করা যেতে পারে। একটি স্ট্রিং জন্য এটি কাজ করবে না। একটি ব্যাকগ্রাউন্ড ইমেজ তৈরি ব্যাকগ্রাউন্ড বৈশিষ্ট্য .

পটভূমি ছবি পরম এবং আপেক্ষিক পথ (রঙ নির্বাচন) আলাদাভাবে মনোযোগ দিতে মূল্য ঠিকানা ব্যাকগ্রাউন্ড ছবি । এই ক্ষেত্রে, ছবিটির আপেক্ষিক পথ ব্যবহার করা হয়, I.E. ঠিকানাটি ইমেজ ফাইলের অবস্থানের ওয়েবসাইটে ওয়েব পৃষ্ঠাটিতে নির্দেশিত হয়। এই বিকল্পটি বিশেষভাবে সফল বলা যাবে না। ছবিটির পরম পথটি ব্যবহার করা ভাল, আই।

তার সম্পূর্ণ ইউআরএল <শরীরের পটভূমি = "/ চিত্র / bg.jpg"> .

এই ক্ষেত্রে, আপনি concomitant সমস্যা হবে না। এটি সম্পর্কে আরো জন্য আপনি এখানে পড়তে পারেন।

আসুন সংক্ষেপে 
বৈশিষ্ট্য ব্যবহার করে নৈতিকভাবে পুরানো, কারণ HTML কোডের বৈধতার জন্য আপনাকে স্থানান্তরিত করতে হবে DOCTYPE।

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

সংক্ষিপ্ত লিঙ্ক: http://goo.gl/03tsnz কিভাবে সাইটের জন্য একটি ব্যাকগ্রাউন্ড করতে? তার মেঝে প্রিয় ফার্সি কার্পেট rises যদি কোন রুম অনেক ভাল চেহারা হবে। তাই আপনার সাইট খারাপ? হয়তো এটা সময় এবং তার মেঝে " সেট করুন
  • »ব্যয়বহুল মার্জিত হস্তনির্মিত প্রাসাদ। সাইটটির জন্য কীভাবে ব্যাকগ্রাউন্ড তৈরি করবেন সে সম্পর্কে আমরা আরও বুঝতে পারব:
  • এটা ঘটে যে সাইটের পুরানো নকশা ইতিমধ্যে এসেছে। এবং আমি নতুন এবং সুস্বাদু কিছু চাই। এবং নতুন নকশা যেমন আপনি নিজের হাত দিয়ে এটি রান্না করা হবে।
  • কিন্তু সম্পূর্ণরূপে সম্পদের সমস্ত নকশা পরিবর্তন করতে - জিনিসটি অকৃতজ্ঞ। হ্যাঁ, এবং প্রত্যেকেরই এই সম্পর্কে একটি জিনিস আছে না। "
  • sharpened.

"হাত। অতএব, পুরোনো টেমপ্লেটটি রিফ্রেশ করা সহজ, সম্পদ বা তার পটভূমি চিত্রের পটভূমির রঙ পরিবর্তন করা সহজ।

সাইটে ব্যাকগ্রাউন্ড পরিবর্তন করার বিভিন্ন উপায় আছে। এই সুযোগ ব্যবহার করে। 
সিএসএস। অথবা । কিন্তু পটভূমির সাথে কাজ করার জন্য অনেকগুলি সম্পত্তি এই ওয়েব টেকনোলজিগুলিতে একই নাম এবং পদ্ধতি রয়েছে।
  • একটি ব্যাকগ্রাউন্ড হিসাবে, আপনি একাধিক আইটেম ব্যবহার করতে পারেন: রঙ; ;
  • পটভূমি ছবি;
  • টেক্সচারাল ইমেজ। আমরা আরো বিস্তারিতভাবে তাদের প্রতিটি ব্যবহার মোকাবেলা করবে। সাইটের জন্য ব্যাক ব্যাকগ্রাউন্ডের রঙ সেট করার জন্য, সম্পত্তিটি ব্যবহার করা হয়।

পেছনের রঙ.

শৈলী বৈশিষ্ট্য 

শৈলী। । অর্থাৎ, ওয়েব পৃষ্ঠার মৌলিক রঙটি সেট করতে, আপনাকে <Body> ট্যাগের ভিতরে এটি নিবন্ধন করতে হবে। উদাহরণ স্বরূপ: <শারীরিক স্টাইল = "পটভূমি-রঙ: # 55D52B"> <p> সাইটের পটভূমি # 55D52B </ p> </ body>

হেক্সাডেসিমেল রঙের কোডের পাশাপাশি, মানটি কীওয়ার্ড ফরম্যাটে বা সমর্থিত হয়

আরজিবি। 

। উদাহরণ:

<শারীরিক স্টাইল = "ব্যাকগ্রাউন্ড-রঙ: আরজিবি (51,255,153)"> <p> আরজিবি ওয়েবসাইটের পটভূমি (23,113,44) </ p> </ body> <শরীরের স্টাইল = "পটভূমি-রঙ: সবুজ"> <p> সবুজ ওয়েবসাইটের পটভূমি </ p> </ body> কীওয়ার্ড ব্যবহার করে পটভূমি রঙ সেটিং বাকি দুটি উপায়ে তুলনায় অনেকগুলি সীমাবদ্ধতা রয়েছে।

মোট 16 টি কীওয়ার্ড রঙ সেটিং জন্য সমর্থিত হয়। এখানে তাদের কিছু:

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

এটা হেক্সাডেসিমেল বিন্যাস বা ব্যবহার করা ভাল 

রঙ নির্বাচন করার পাশাপাশি, অন্যান্য সেটিংস পাওয়া যায়। যদি সম্পত্তি মান সেট করুন স্বচ্ছতা

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

উদাহরণ: 

<শারীরিক স্টাইল = "ব্যাকগ্রাউন্ড-চিত্র: URL (IMG_1809.jpg)"> </ Body>

কোড থেকে দেখা যেতে পারে, ইমেজ বাইন্ডিং পথের মাধ্যমে ঘটে

ইউআরএল

পোস্ট ব্রেকেট। কিন্তু স্ক্রিনের সমগ্র এলাকাটি তাদের মাপের সাথে পূরণ করার জন্য সমস্ত ছবিগুলি এত বড় হয়ে উঠতে পারে না। আসুন দেখি কিভাবে ছোট চিত্রটি প্রদর্শিত হবে।

ধরুন আমরা কবিতা সম্পর্কে একটি সাইট তৈরি করছি, এবং একটি স্তর হিসাবে আপনাকে Pegasus এর চিত্রটি ব্যবহার করতে হবে। উইংডেড ঘোড়া ক্রিয়েটিভের ক্রিয়েটিভ চিন্তার স্বাধীনতা ব্যক্ত করবে!

আমরা একবার পর্দার মাঝখানে প্রদর্শিত ইমেজ প্রদর্শিত হবে। কিন্তু, দুর্ভাগ্যবশত, ব্রাউজার আমাদের মহিমান্বিত ইচ্ছা বুঝতে পারে না। এবং স্ক্রিনের এলাকাটি সামঞ্জস্য করতে পারে এমন সাইটটির পটভূমির জন্য একটি ছোট ছবি প্রদর্শন করে:

সম্ভবত কবিদের ডানা দিয়ে চারটি হাসি ঘোড়া অনুপ্রেরণার জন্য খুব বেশি হবে। অতএব, আমাদের pegasus ক্লোনিং নিষিদ্ধ। সম্পত্তি ব্যবহার করে এটা করবেন

পটভূমি পুনরাবৃত্তি. । সম্ভাব্য মান: পুনরাবৃত্তি-এক্স - অনুভূমিকভাবে ব্যাকগ্রাউন্ড ইমেজ পুনরাবৃত্তি;

সুতরাং, আমরা দুটি ছবি থেকে ব্যাক ব্যাকগ্রাউন্ড সেট করার জন্য টাস্কটি সহজতর করি: অ্যানিমেশন এবং নিয়মিত চিত্র। এই ক্ষেত্রে, জিআইএফ অ্যানিমেশনটি সংশোধন করা হবে, এবং অঙ্কনটি পৃষ্ঠার বিষয়বস্তু সহ স্ক্রোল করা হয়।

পুনরাবৃত্তি-Y - উল্লম্বভাবে;

পুনরাবৃত্তি - উভয় অক্ষ উপর;

কোন পুনরাবৃত্তি - পুনরাবৃত্তি নিষিদ্ধ করা হয়।

তালিকাভুক্ত বিকল্পগুলির মধ্যে আমরা শেষ পর্যন্ত আগ্রহী। সাইটের পটভূমি পরিবর্তন করার আগে, আমরা আপনার কোডটিতে এটি ব্যবহার করি:

<শারীরিক স্টাইল = "ব্যাকগ্রাউন্ড-চিত্র: URL (3.jpg); ব্যাকগ্রাউন্ড-পুনরাবৃত্তি: না-পুনরাবৃত্তি: না-পুনরাবৃত্তি"> </ body>

কিন্তু, অবশ্যই, আমাদের লেটো স্ক্রিনের মাঝখানে অবস্থিত হলে এটি আরও ভাল। সম্পত্তি

পটভূমি অবস্থান শুধু পৃষ্ঠায় পটভূমি প্যাটার্ন অবস্থান করার উদ্দেশ্যে করা হয়। অবস্থান বিভিন্ন উপায়ে সমন্বয় সেট করুন:
। অর্থাৎ, ওয়েব পৃষ্ঠার মৌলিক রঙটি সেট করতে, আপনাকে <Body> ট্যাগের ভিতরে এটি নিবন্ধন করতে হবে। উদাহরণ স্বরূপ: কীওয়ার্ড (
<শরীরের পটভূমি = "/ চিত্র / bg.jpg"> শীর্ষ, নীচে, কেন্দ্র, বাম, ডান)
অথবা শতাংশ - গণনা উপরের বাম কোণ থেকে শুরু হয়;
তার মেঝে প্রিয় ফার্সি কার্পেট rises যদি কোন রুম অনেক ভাল চেহারা হবে। তাই আপনার সাইট খারাপ? হয়তো এটা সময় এবং তার মেঝে " পরিমাপ ইউনিট (
(রঙ নির্বাচন) পিক্সেল
)। আমরা কেন্দ্রীকরণের জন্য সবচেয়ে সহজ বিকল্পটি ব্যবহার করি:

<শারীরিক স্টাইল = "ব্যাকগ্রাউন্ড-চিত্র: URL (3.jpg); ব্যাকগ্রাউন্ড-পুনরাবৃত্তি: না-পুনরাবৃত্তি: ব্যাকগ্রাউন্ড-অবস্থান: শীর্ষ কেন্দ্র"> </ body>

স্ক্রোলিংয়ের সময় আপনি অঙ্কনটির অবস্থান ঠিক করতে হবে। অতএব, সাইটের একটি ছবি করার আগে, একটি বিশেষ সম্পত্তি ব্যবহার করুন।

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

। বৈধ মান: <ul> <li> স্ক্রোল; </ li> <li> স্থির। </ Li> </ ul>

আমরা শেষ অর্থ প্রয়োজন। এখন আমাদের উদাহরণের কোডটি এরকম দেখতে পাবে: [/ HTML] 
<শারীরিক স্টাইল = "ব্যাকগ্রাউন্ড-চিত্র: URL (3.jpg); ব্যাকগ্রাউন্ড-পুনরাবৃত্তি: না-পুনরাবৃত্তি: ব্যাকগ্রাউন্ড-অবস্থান: শীর্ষ কেন্দ্র; পটভূমি-সংযুক্তি: স্থায়ী"> </ body> 

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

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

মিটার

"অনেক সময় লাগবে?

"অনেক সময় লাগবে? এই সব সমস্যা একটি টেক্সচার পটভূমি ব্যবহার করে সমাধান করা হয়। এটি টেক্সচারের একটি প্যাটার্ন হিসাবে একটি ছোট চিত্র ব্যবহার করে। এমনকি তার একাধিক পুনরাবৃত্তি শর্তাধীন, প্যাটার্ন শুধুমাত্র একবার লোড করা হয়।

সাইটের জন্য একটি অন্ধকার পটভূমি তৈরি করতে শরীর। ফটোশপ। শরীর। , একটি দীর্ঘ 1200 পিক্সেলের একটি ফালা এবং 15 পিক্সেলের প্রস্থের আকারে একটি চিত্র তৈরি করুন। তারপরে আমরা একটি সহজ কালো এবং সাদা গ্রেডিয়েন্ট ব্যবহার করি এবং ফলাফলের টেক্সচারটি সাইটটিতে পৃষ্ঠায় সংযুক্ত করি:

<শারীরিক স্টাইল = "ব্যাকগ্রাউন্ড-চিত্র: URL (1. পিএনজি); রঙ: আরজিবি (0,51,204)"> </ body>

স্বচ্ছতার জন্য, আমরা পাঠ্য যোগ করা এবং সম্পত্তি ব্যবহার করে এটি রঙ সেট। শরীর। রঙ শরীর। । যে কি ঘটেছে:

  • উচ্চতা: 200%; উপরে বর্ণিত সমস্ত বৈশিষ্ট্য এছাড়াও ক্যাসকেডিং স্টাইল শীট জন্য প্রযোজ্য। সাইটের একটি পটভূমি তৈরি করুন
  • পটভূমি ছবি সিএসএস।
  • আমাদের পূর্ববর্তী উদাহরণগুলির একটি কোড পুনর্লিখন করে: <হেড> <শিরোনাম> নথি শিরোনামহীন </ শিরোনাম> <শৈলী প্রকার = "পাঠ্য / সিএসএস"> শরীর {পটভূমি-চিত্র: URL (3.jpg); ব্যাকগ্রাউন্ড-পুনরাবৃত্তি: কোন পুনরাবৃত্তি; পটভূমি অবস্থান: শীর্ষ কেন্দ্র; পটভূমি-সংযুক্তি: স্থির;} </ শৈলী> </ head> <body> </ body>
  • ফলাফল অনুরূপ হবে। আচ্ছা, আমরা সব বিকল্প দেখেছি, কিভাবে সাইটে ব্যাকগ্রাউন্ডটি পরিবর্তন করতে হবে। এখন এটি শুধুমাত্র ভবিষ্যতের কার্পেটের অঙ্কন তৈরি করতে এবং আপনার সংস্থার পৃষ্ঠাগুলিতে এটি ছড়িয়ে দেয়। কিন্তু এই আপনার হাত।
  • সবাইকে শিখতে এবং কিছু শিখতে ভাল দিন! পেজের পটভূমির ব্যবস্থা করার জন্য নির্মাতারা বিকাশের সময় আপনি কি সাইটের চেহারাগুলিতে মনোযোগ দিয়েছেন? এবং আমি পরিণত। এটা বধ দেখায়। প্রায়শই, বিভিন্ন ধরণের তথ্যের মধ্যে স্বাভাবিক বিচ্ছেদের অভাবের কারণে এটি মিশ্রিত হয় এবং কেবল এমন একটি ওয়েব রিসোর্সের আরও দেখার ইচ্ছাটি অদৃশ্য হয়ে যায়। যাতে আপনার প্রকল্পে এই ধরনের সমস্যা ঘটেছিল, আমি এই বিষয়ে একটি নিবন্ধ লিখতে সিদ্ধান্ত নিলাম: "এইচটিএমএল-তে পৃষ্ঠাগুলির ব্যাকগ্রাউন্ড তৈরি করতে হবে।" প্রকাশনার পড়ার পর, আপনি শিখবেন, কোন সরঞ্জামগুলি আপনি ব্যাকগ্রাউন্ড ডিজাইনটি সেট করতে পারেন, একটি ব্যাকগ্রাউন্ড সংশোধন বা পরিবর্তন এবং আরও অনেক কিছু করতে পারেন, যা আপনার ওয়েবসাইটকে আকর্ষণীয় করতে সহায়তা করবে। এখন শুরু করা যাক!
  • পটভূমি ওয়েব পেজ সেটিং করার জন্য বেসিক সরঞ্জাম পটভূমি ইমেজ সেট করতে, ওয়েব-ভাষা ডেভেলপারদের একটি বৈশিষ্ট্য ব্যাকগ্রাউন্ড প্রদান করেছে। এটি এইচটিএমএল এবং সিএসএস উভয় পাওয়া যায়।
  • মার্কআপ ভাষাতে, এটি শরীরের ট্যাগের একটি বৈশিষ্ট্য এবং শৈলী টেবিলগুলিতে - একটি সার্বজনীন সম্পত্তি যা আপনাকে একই সময়ে রিয়ার প্ল্যানের বৈশিষ্ট্যটিকে 5 পর্যন্ত সেট করতে দেয়। পটভূমি একটি মোটামুটি নমনীয় উপাদান যা ব্যাকগ্রাউন্ডটি একটি রঙ, রঙের ছবি বা এমনকি অ্যানিমেশন হিসাবে কাজ করতে ব্যবহার করা যেতে পারে। সুতরাং, ইউনিট এইচটিএমএল <শরীরের মাধ্যমে পটভূমি চিত্রটি ইনস্টল করতে এটি এমন একটি কোড লিখতে যথেষ্ট:
  • <শরীরের পটভূমি = "ফাইল ঠিকানা"> ... </ body> এবং পরিবর্তে "ফাইল ঠিকানা" শব্দটির পথ সন্নিবেশ করান।
  • তবে, নোটিশ! পটভূমির আকারে আপনি রঙ প্যালেট থেকে নির্দিষ্ট একটি মনোকুন ক্যানভাস দেখতে চান, তবে এটি BGCOLOR বৈশিষ্ট্যটি ব্যবহার করে সম্পন্ন করা হয়েছে। উদাহরণস্বরূপ, <শরীর bgcolor = "# 000000"> ... </ body>, আমরা আমাদের সাইটের জন্য একটি কালো পটভূমি জিজ্ঞাসা।
  • সিএসএস এবং এইচটিএমএল-তে রংগুলি একটি ইংরেজী শব্দ (উদাহরণস্বরূপ, লাল), অথবা একটি বিশেষ কোড যা এটির পরে একটি সাইন # এবং ছয় অক্ষর ধারণ করে (উদাহরণস্বরূপ, # FFDAB9) এর মধ্যে একটি বিশেষ কোড দ্বারা সেট করা হয়। ডেভেলপারদের জন্য বিশেষ সফ্টওয়্যার পণ্যগুলিতে দ্বিতীয় বিকল্পটি টাইপ করার সময়, প্যালেটটি আপনার সামনে উপস্থিত হবে। আপনি যদি এই ওয়েব ভাষা শিখতে শুরু করেন, তবে রঙের কোডটি ইন্টারনেটে স্প্যাক করা যেতে পারে।

Cascading স্টাইল টেবিল মধ্যে সম্পত্তি হিসাবে পটভূমি উচ্চতা: 200%; :

এটি সেট বা সিএসএস শৈলীগুলির সাথে একটি পৃথক ফাইলে বা <শৈলী> উপাদানটিতে রয়েছে। এই সম্পত্তির সাথে, আপনি ব্যাকগ্রাউন্ড নিদর্শন বা রঙ ইনস্টল করতে পারেন, পৃষ্ঠার শুরুতে অবস্থান, পুনরাবৃত্তি এবং নির্দিষ্ট চিত্রগুলি সেট করুন। বৃহত্তর স্বচ্ছতার জন্য, আমি টেবিলে সংজ্ঞা তৈরি করেছি। 

পরামিতি উদ্দেশ্য

সাইটের বিষয়বস্তু সহ একটি নির্দিষ্ট বা স্ক্রোলেড ইমেজ ইনস্টল করতে ব্যবহৃত হয়। সংশোধন, স্ক্রোল এবং উত্তরাধিকার

পটভূমি ইমেজ সেট করে। এটি রঙের সাথে একযোগে নির্দেশিত হতে পারে। তারপর ছবিটি সম্পূর্ণরূপে লোড না হওয়া পর্যন্ত পরেরটি প্রদর্শিত হবে।

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

পটভূমি ইমেজ বৈশিষ্ট্য ব্যবহার করার সময় প্রয়োগ করুন। ইমেজ পুনরাবৃত্তি করা হবে কিভাবে regulates। আপনি 2 টি মান উল্লেখ করতে পারেন: অনুভূমিক এবং উল্লম্বের জন্য। বৈশিষ্ট্য আছে: কোন পুনরাবৃত্তি, পুনরাবৃত্তি, পুনরাবৃত্তি-এক্স, পুনরাবৃত্তি-Y, উত্তরাধিকার, স্থান

Добавить комментарий