সিএসএস ব্যাকগ্রাউন্ড-চিত্র - সঠিক ব্যবহারটি কী?


145

সিএসএস পটভূমি-চিত্রের সম্পত্তিটির সঠিক ব্যবহার কী? আমি বুঝতে চেষ্টা করছি মূল জিনিস

  1. এর কি উদ্ধৃতিতে থাকা দরকার: background-image: url('images/slides/background.jpg');
  2. এটি কি আপেক্ষিক পথ হতে পারে (উপরে হিসাবে) বা এটি একটি পূর্ণ ইউআরএল হওয়া উচিত?
  3. অন্য যে কোনও পয়েন্টগুলি মান সম্মত ব্রাউজারগুলিতে এটি সঠিকভাবে কাজ করে তা নিশ্চিত করার জন্য আমার সচেতন হওয়া উচিত।


কেবলমাত্র একটি দ্রষ্টব্য: নেটবিন in এ আপনি যদি ইউআরএল () এর অভ্যন্তরের পথ ছেড়ে দেন তবে আপনি একটি সতর্কতা পেয়ে যাবেন "অপ্রত্যাশিত মান টোকেন ইউআরএল" আপনি যদি একক বা দ্বিগুণ উদ্ধৃতিতে পথ রাখেন, সতর্কতাটি অদৃশ্য হয়ে যাবে।
ক্যান্তে

এটি 7.3 এ স্থির করা হয়েছে। netbeans.org/bugzilla/show_bug.cgi?id=209067
caiosm1005

উত্তর:


157

পাথটি হয় পূর্ণ বা আপেক্ষিক হতে পারে (অবশ্যই যদি চিত্রটি অন্য কোনও ডোমেন থেকে হয় তবে এটি অবশ্যই পূর্ণ থাকতে হবে)।

ইউআরআইতে আপনার উদ্ধৃতি ব্যবহার করার দরকার নেই; বাক্য গঠনটি হ'ল:

background-image: url(image.jpg);

অথবা

background-image: url("image.jpg");

তবে, ডাব্লু 3 থেকে :

কোনও অক্ষরযুক্ত ইউআরআই-তে উপস্থিত হওয়া কিছু অক্ষর, যেমন বন্ধনী, সাদা স্থানের অক্ষর, একক উদ্ধৃতি (') এবং ডাবল উদ্ধৃতি ("), অবশ্যই ব্যাকস্ল্যাশ দিয়ে পালাতে হবে যাতে ফলস্বরূপ ইউআরআই মান একটি ইউআরআই টোকেন:' \ (', '\)'।

সুতরাং এর মতো উদাহরণে হয় হয় উদ্ধৃতি বা ডাবল উদ্ধৃতি ব্যবহার করা বা অক্ষরগুলি এড়িয়ে যাওয়া দরকার।


48
  1. না আপনার উক্তির দরকার নেই।

  2. হ্যা, তুমি পারো. তবে মনে রাখবেন যে আপেক্ষিক URL গুলি আপনার স্টাইলশিটের URL থেকে সমাধান করা হয়েছে URL

  3. কোট ব্যবহার না করা ভাল। আমি মনে করি এমন ক্লায়েন্ট রয়েছে যা তাদের বোঝে না।


28

1) উদ্ধৃতি স্থাপন একটি ভাল অভ্যাস

2) এটি আপেক্ষিক পথ হতে পারে উদাহরণস্বরূপ:

background-image: url('images/slides/background.jpg');

ফোল্ডারে ইমেজ ফোল্ডার সন্ধান করা হবে যা থেকে সিএসএস লোড হয়েছে। সুতরাং চিত্রগুলি যদি অন্য ফোল্ডারে থাকে বা সিএসএস ফোল্ডার গাছের বাইরে থাকে তবে আপনার অবশ্যই নিখুঁত পথ বা মূল পাথের সাথে সম্পর্কিত (/ দিয়ে শুরু) হওয়া উচিত

৩) ব্যাকগ্রাউন্ড-চিত্রটির জন্য এটি পুরোপুরি মান সম্মত ব্রাউজারগুলিতে নিয়মিত আচরণ করতে এটির জন্য সম্পূর্ণ ঘোষণাটি ব্যবহার করা উচিত:

background:blue url('/images/clouds.jpg') no-repeat scroll left center;

1
আপনি এর backgroundপরিবর্তে মানে না background-image?
গম্বো

2
কারণ কখনও কখনও আপনার ইমেজের নাম বা পথের নাম থাকে এবং এটি সমস্যার কারণ হতে পারে।
TheVilageIdiot

@ দ্য ভিলেজেআইডিট এখনও তৃতীয় লাইনে background-imageনেই যে এটি background@ গম্বোর পরামর্শ অনুসারে করা উচিত নয়
কেএনইউ

5

আপেক্ষিক পাথ ভাল এবং কোট প্রয়োজন হয় না। আর একটি জিনিস যা সহায়তা করতে পারে তা হ'ল "শর্টহ্যান্ড" backgroundবৈশিষ্ট্যটি কোনও কারণে চিত্রটি লোড না হয় বা উপলভ্য না হলে পটভূমির রঙ নির্দিষ্ট করতে specify

#elementID {
    background: #000 url(images/slides/background.jpg) repeat-x top left;
}

এটিও লক্ষ করুন যে চিত্রটি পুনরাবৃত্তি করবে এবং কোন দিকে (যদি আপনি নির্দিষ্ট না করেন তবে ডিফল্টটি অনুভূমিক এবং উল্লম্বভাবে পুনরাবৃত্তি করতে হবে) এবং তার ধারকটির সাথে সম্পর্কিত চিত্রটির অবস্থানও নির্দিষ্ট করে দিতে পারেন।


4

যদি আপনার চিত্রগুলি আপনার সিএসএস ফাইলের একটি পৃথক ডিরেক্টরিতে থাকে এবং আপনি চান যে আপেক্ষিক পথটি আপনার ওয়েবসাইটের মূল থেকে শুরু হয়:

background-image: url('/Images/bgi.png');

আমি এসেছি যে আমি কোনও আপেক্ষিক পথ ব্যবহার করতে পারি তার সন্ধান করছিলাম না ... পথটি কোথায় শুরু হয় সে সম্পর্কে পরিষ্কার হওয়ার জন্য আমি কীভাবে কোনও আপেক্ষিক পথটি ব্যবহার করতে পারি তা অনুসন্ধান করছিলাম।
me_

1

কেবলমাত্র ডিরেক্টরি কাঠামোটি পরীক্ষা করুন যেখানে ধরে নেওয়া যাক যে সিএসএস ফোল্ডারের বাইরে আপনার কাছে কোনও সিএসএস ফোল্ডার এবং চিত্র ফোল্ডার রয়েছে তখন আপনাকে "../ images / image.jpg" ব্যবহার করতে হবে এবং এটি আমার জন্য যেমন কাজ করবে ঠিক ততটাই নিশ্চিত হয়ে নিন ডিরেক্টরি স্টাকচার


1

আপনার সত্যিকারের উদ্ধৃতিগুলির দরকার নেই যদি বলুন যে ব্যবহারটি আপনার সিএসএস ফাইল থেকে চিত্রটি ব্যবহার করছে এটি হতে পারে

{background-image: url(your image.png/jpg etc);}

0

আপনার উদ্ধৃতি ব্যবহার করার দরকার নেই এবং আপনি যে কোনও পথ ব্যবহার করতে পারেন!


0

ব্যাকগ্রাউন্ড-ইমেজ এবং ইউআরআই -এর জন্য সম্পর্কিত সাইটপয়েন্টের রেফারেন্স পৃষ্ঠাগুলি দেখুন

  1. এটি উদ্ধৃতিতে থাকতে হবে না তবে আপনি যদি চান তবে সেগুলি ব্যবহার করতে পারেন। (আমি মনে করি আইই 5 / ম্যাক একক উদ্ধৃতি সমর্থন করে না)।
  2. আপেক্ষিক এবং পরম উভয়ই সম্ভব; একটি আপেক্ষিক পাথ সিএসএস ফাইলের পাথের সাথে সম্পর্কিত।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.