ব্যাকগ্রাউন্ড এবং ব্যাকগ্রাউন্ড-রঙের মধ্যে পার্থক্য কী

Question

ব্যবহার করে একটি পটভূমির রঙ উল্লেখ মধ্যে পার্থক্য কি backgroundএবং background-color?

স্নিপেট # 1

body { background-color: blue; }

স্নিপেট # 2

body { background: blue; }

Answer 1

এগুলি দুটি স্বতন্ত্র বৈশিষ্ট্য হিসাবে অনুধাবন করা, আপনার নির্দিষ্ট উদাহরণে ফলাফলের কোনও পার্থক্য নেই, যেহেতু backgroundপ্রকৃত পক্ষে এটি সংক্ষিপ্ত

ব্যাকগ্রাউন্ড-কালার
ব্যাকগ্রাউন্ড-ইমেজ
ব্যাকগ্রাউন্ড-পজিশন
-পুনরাবৃত্তি
ব্যাকগ্রাউন্ড-সংযুক্তি
ব্যাকগ্রাউন্ড-ক্লিপ
ব্যাকগ্রাউন্ড-উত্স
পটভূমি-আকার

এইভাবে, শর্টকাটটি background-colorব্যবহার করে backgroundআপনি অন্য কোনও background-*সম্পত্তি একবারে না বলে এক বা একাধিক মান যুক্ত করতে পারেন ।

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

Comments

সুতরাং background5 টি বৈশিষ্ট্যের জন্য কেবল একটি শর্টকাট? অতএব ব্যাকগ্রাউন্ড অবস্থান, রঙ এবং চিত্র থাকলে বাস্তব জীবনে ব্যবহারিক নয়?

— stanigator

এটি অত্যন্ত ব্যবহারিক, কারণ আপনি এই সমস্ত বৈশিষ্ট্যকে একটি লাইনে নির্দিষ্ট করতে পারেন । পড়ুন অফিসিয়াল নথিপত্র

— খ্রিস্টান

পার্থক্য আছে. ব্যাকগ্রাউন্ড-রঙ ব্যবহার করার সময় তার শিশু উপাদানগুলির মধ্যে স্বচ্ছ ফাঁক সহ আমার একটি ডিভ থাকে। আমি পুরোপুরি ব্যাকগ্রাউন্ড ব্যবহার করি তবে এটি সম্পূর্ণ শক্ত হয়। তাদের সম্পত্তি বা আচরণের মধ্যে যাচাইযোগ্য পার্থক্য রয়েছে।

— ব্যবহারকারী 1873073

ফ্রিউইউ, @ ক্রিশ্চিয়ান ভার্গার লিঙ্ক থেকে: 'ব্যাকগ্রাউন্ড' বৈশিষ্ট্যটি স্বতন্ত্র পটভূমির বৈশিষ্ট্য নির্ধারণের জন্য একটি শর্টহ্যান্ড সম্পত্তি (যেমন, 'ব্যাকগ্রাউন্ড-রঙ', 'ব্যাকগ্রাউন্ড-চিত্র', 'ব্যাকগ্রাউন্ড-রিপিট', 'ব্যাকগ্রাউন্ড-সংযুক্তি' এবং ' ব্যাকগ্রাউন্ড-অবস্থান ') স্টাইল শীটে একই জায়গায়। একটি বৈধ ঘোষণা হিসাবে দেওয়া হয়েছে, 'ব্যাকগ্রাউন্ড' বৈশিষ্ট্যটি প্রথমে সমস্ত পৃথক ব্যাকগ্রাউন্ড বৈশিষ্ট্যগুলিকে তাদের প্রাথমিক মানগুলিতে সেট করে, তারপরে ঘোষণায় প্রদত্ত স্বচ্ছ মানগুলি নির্ধারণ করে। দেওয়া উদাহরণ:P { background: url("chess.png") gray 50% repeat fixed }

— রাফিন ২

বিকাশকারী.মোজিলা.আর.এইন

— ইউএস

Answer 2

backgroundসমস্ত পূর্ববর্তী supercede হবে background-color, background-imageইত্যাদি উল্লেখ। এটি মূলত একটি শর্টহ্যান্ড, তবে একটি রিসেট ।

আমি মাঝে মাঝে এটি backgroundটেমপ্লেট কাস্টমাইজেশনে পূর্ববর্তী বৈশিষ্ট্যগুলিকে ওভাররাইট করতে ব্যবহার করব , যেখানে আমি নিম্নলিখিতগুলি চাই:

background: white url(images/image1.jpg) top left repeat;

নিম্নলিখিত হতে:

background: black;

সুতরাং, সকল প্যারামিটার ( background-image, background-position, background-repeat) তাদের ডিফল্ট মান পুনরায় সেট করবে।

Comments

এটি আরও সম্পূর্ণ উত্তর, রিসেট অংশটি খুব গুরুত্বপূর্ণ পার্থক্য।

— Draken

developer.mozilla.org/en-US/docs/Web/CSS/background -> সমস্ত CSS শর্টহ্যান্ড বৈশিষ্ট্য হিসাবে, যে কোনও বাদ দেওয়া উপ-মান তাদের প্রাথমিক মান> ব্যাকগ্রাউন্ড-চিত্রতে সেট করা হবে: ব্যাকগ্রাউন্ড-পজিশন: 0% 0% ব্যাকগ্রাউন্ড-আকার: স্বতঃআটো ব্যাকগ্রাউন্ড-পুনরাবৃত্তি: পুনরাবৃত্তি পটভূমি-উত্স: প্যাডিং-বক্স ব্যাকগ্রাউন্ড-ক্লিপ: বর্ডার-বক্স ব্যাকগ্রাউন্ড-সংযুক্তি: স্ক্রোল ব্যাকগ্রাউন্ড-রঙ: স্বচ্ছ

— মার্কোজেন

Answer 3

সিএসএস কর্মক্ষমতা সম্পর্কে :

backgroundবনাম background-color:

18 পৃষ্ঠার তুলনা একবারে ব্যাকগ্রাউন্ডের সাথে এবং একবার ব্যাকগ্রাউন্ড-রঙের সাথে , একটি পৃষ্ঠায় ছোট আয়তক্ষেত্র হিসাবে 100 বার রেন্ডার করা হয়েছিল ।

যদিও এই সংখ্যাগুলি একক পৃষ্ঠা পুনরায় লোডের সাথে সাথে পরবর্তী রিফ্রেশগুলির সাথে রেন্ডার সময়গুলির পরিবর্তিত হয়, তবে শতাংশের পার্থক্যটি মূলত প্রতিবারই একই ছিল।

এটি প্রায় 42.6 মিমি সঞ্চয়, প্রায় দ্বিগুণ দ্রুতসাফারি .0.০.১-এ ব্যাকগ্রাউন্ড-কালারের পরিবর্তে ব্যাকগ্রাউন্ড ব্যবহার করার সময় এটি করে। ক্রোম 33 একই রকম দেখা যায়।

এটি সত্যই আমাকে দূরে সরিয়ে দিয়েছে কারণ দুটি কারণে দীর্ঘতম সময়ের জন্য:

• আমি সাধারণত সিএসএস বৈশিষ্ট্যগুলিতে বিশেষত ব্যাকগ্রাউন্ডের সাথে স্পষ্ট সাক্ষীর পক্ষে তর্ক করি কারণ এটি রাস্তায় নিখরচায় বিরূপ প্রভাব ফেলতে পারে।
• আমি ভেবেছিলাম যে কোনও ব্রাউজার যখন দেখবে background: #000;তখন তারা সত্যিই দেখতে পাবে background: #000 none no-repeat top center;। আমার এখানে কোনও সংস্থার সাথে কোনও লিঙ্ক নেই, তবে আমি কোথাও এটি পড়ে মনে করি all

রেফ: https://github.com/mdo/css-perf#background-vs-background-color

Comments

আমি এখানে এসেছি - সত্যই, ফলাফল দ্বারা সত্যিই অবাক। এই উত্তরের জন্য ধন্যবাদ।

— ম্যাভ

আপনি আরও বলতে পারেন যে ভাল পারফরম্যান্সের কারণে সমস্ত সিএসএস শর্টহ্যান্ডগুলি বেশি পছন্দনীয়?

— লেভেন্ট ডিভিলিওগ্লু

পরীক্ষার্থী হিসাবে @ লেভেন্টডিভিওলিওলু বলেছেন: These kind of tests are cheats and always going to be somewhat inaccurate from the real world github.com/mdo/css-perf#updated-concionsions-from-averages

— l2aelba

Answer 4

এর মাধ্যমে backgroundআপনি সমস্ত backgroundবৈশিষ্ট্য যেমন সেট করতে পারেন :

• background-color
• background-image
  
• background-repeat
  
• background-position
  প্রভৃতি

---

সঙ্গে background-colorআপনি শুধু পটভূমি রং নির্দিষ্ট করতে পারেন

background: url(example.jpg) no-repeat center center #fff;

বনাম

background-image: url(example.jpg);
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;

---

অধিক তথ্য

(ক্যাপশন দেখুন: পটভূমি - শর্টহ্যান্ড সম্পত্তি)

Answer 5

একটি পার্থক্য:

আপনি যদি কোনও চিত্রকে এইভাবে ব্যাকগ্রাউন্ড হিসাবে ব্যবহার করেন:

background: url('Image Path') no-repeat;

তারপরে আপনি এটিকে "পটভূমির রঙ" বৈশিষ্ট্য দিয়ে ওভাররাইড করতে পারবেন না।

আপনি যদি রঙ প্রয়োগ করতে ব্যাকগ্রাউন্ড ব্যবহার করেন তবে এটি ব্যাকগ্রাউন্ড-রঙের মতো এবং ওভাররাইড করা যেতে পারে।

যেমন: http://jsfiddle.net/Z57Za/11/ এবং http://jsfiddle.net/Z57Za/12/

Answer 6

তারা উভয় একই। সেখানে একাধিক হয় পটভূমি নির্বাচকরা (অর্থাত background-color, background-image, background-position) এবং আপনার পরিস্থিতির সহজ মাধ্যমে পারেন সেগুলি অ্যাক্সেস করতে পারবেন backgroundনির্বাচক অথবা আরো নির্দিষ্ট এক। উদাহরণ স্বরূপ:

background: blue url(/myImage.jpg) no-repeat;

অথবা

background-color: blue;
background-image: url(/myImage.jpg);
background-repeat: no-repeat;

Answer 7

পার্থক্যটি হ'ল backgroundশর্টহ্যান্ড সম্পত্তিটি বেশ কয়েকটি পটভূমির সাথে সম্পর্কিত বৈশিষ্ট্য সেট করে। এটা তাদের সব সেট করে, এমনকি যদি আপনি শুধুমাত্র তারপর থেকে অন্যান্য সম্পত্তি তাদের প্রাথমিক মূল্যবোধ, যেমন সেট করা হয়, যেমন একটি রঙের মান উল্লেখ background-imageকরাnone ।

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

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

Answer 8

এখানে কোন পার্থক্য নেই. দুজনেই একইভাবে কাজ করবে।

সিএসএস ব্যাকগ্রাউন্ড বৈশিষ্ট্যগুলি কোনও উপাদানটির পটভূমি প্রভাবগুলি সংজ্ঞায়িত করতে ব্যবহৃত হয়।

পটভূমি প্রভাবের জন্য ব্যবহৃত CSS বৈশিষ্ট্য:

• পেছনের রং
• পটভূমি চিত্র
• পটভূমি পুনরাবৃত্তি
• পৃষ্ঠভূমি সংযুক্তি
• পটভূমি অবস্থানে রয়েছে এমন

পটভূমি সম্পত্তি এই সমস্ত সম্পত্তি অন্তর্ভুক্ত এবং আপনি কেবল একটি লাইনে লিখতে পারেন।

Answer 9

এটি সেরা উত্তর। শর্টহ্যান্ড (ব্যাকগ্রাউন্ড) রিসেট এবং ডিআরওয়াই (লংহ্যান্ডের সাথে একত্রিত) এর জন্য।

Answer 10

18 পৃষ্ঠার তুলনা একবারে ব্যাকগ্রাউন্ডের সাথে এবং একবার ব্যাকগ্রাউন্ড-রঙের সাথে, একটি পৃষ্ঠায় ছোট আয়তক্ষেত্র হিসাবে 100 বার রেন্ডার করা হয়েছিল।

আমি সিএসএস পারফরম্যান্স পরীক্ষাটি আবার তৈরি করেছি এবং ফলাফলগুলি আজকাল উল্লেখযোগ্যভাবে আলাদা।

background

ক্রোম 54 : 443 (/s / div)

ফায়ারফক্স 49 : 162 (/s / div)

প্রান্ত 10 : 56 (/s / div)

background-color

ক্রোম 54 : 449 (/s / div)

ফায়ারফক্স 49 : 171 (/s / div)

এজ 10 : 58 (/s / div)

যেমন আপনি দেখুন - প্রায় কোনও পার্থক্য নেই।

Answer 11

backgroundশর্টকাট হ'ল background-colorনীচের মত কয়েকটি ব্যাকগ্রাউন্ড সম্পর্কিত স্টাফ:

background-color
background-image
background-repeat
background-attachment
background-position 

ডাব্লু 3 সি থেকে নীচের বিবৃতিটি পড়ুন:

পটভূমি - শর্টহ্যান্ড সম্পত্তি

কোডটি ছোট করার জন্য, একটি একক সম্পত্তিতে সমস্ত পটভূমি বৈশিষ্ট্য নির্দিষ্ট করাও সম্ভব। একে শর্টহ্যান্ড সম্পত্তি বলা হয়।

পটভূমির জন্য শর্টহ্যান্ড সম্পত্তি ব্যাকগ্রাউন্ড:

body {
  background: white url("img_tree.png") no-repeat right top;
}

শর্টহ্যান্ড সম্পত্তি ব্যবহার করার সময় সম্পত্তি মানগুলির ক্রম হয়:

background-color
background-image
background-repeat
background-attachment
background-position

যতক্ষণ অন্য ক্রমগুলি এই ক্রমে থাকে ততক্ষণ সম্পত্তির মানগুলির মধ্যে একটি অনুপস্থিত কিনা তা বিবেচ্য নয়।

Answer 12

আমি খুঁজে পেয়েছি যে আপনি ব্যাকগ্রাউন্ড-রঙের সাথে গ্রেডিয়েন্ট সেট করতে পারবেন না।

এইটা কাজ করে:

background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

এটি করে না:

background-color:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

Answer 13

background নিম্নলিখিতগুলির জন্য সংক্ষিপ্ত বিবরণ সম্পত্তি:

 - background-color
 - background-image
 - background-repeat
 - background-attachment
 - background-position

আপনি এখানে প্রতিটি সম্পত্তি সম্পর্কে বিস্তারিত তথ্য করতে পারেন

সম্পত্তি অর্ডার

ব্রাউজার বাস্তবায়নের বেশিরভাগ ক্ষেত্রে (আমি মনে করি সম্ভবত পুরানো ব্রাউজারগুলি সমস্যাগুলি উপস্থাপন করতে পারে) বৈশিষ্ট্যগুলির ক্রমটি বাদ দেয় না:

• background-originএবং background-clip: যখন এই বৈশিষ্ট্য উভয় উপস্থিত থাকে, প্রথমটি উল্লেখ করে -originএবং দ্বিতীয়টি -clip।

  উদাহরণ:

  background: content-box green padding-box;

  এর সমতুল্য:

  background-origin: content-box;
  background-color: green;
  background-clip: padding-box;

• background-sizeসর্বদা অনুসরণ করতে হবে background-positionএবং বৈশিষ্ট্যগুলি অবশ্যই পৃথক করা উচিত/

• যদি background-positionদুটি সংখ্যার সমন্বয়ে গঠিত হয়, প্রথমটি হ'র অনুভূমিক মান এবং দ্বিতীয়টি উল্লম্ব মান।

Answer 14

আউটলুকের জন্য ইমেলগুলি তৈরি করার সময় আমি লক্ষ্য করেছি ...

/*works*/
background: gray;

/*does not work*/
background-color: gray;

Answer 15

আপনি এটির সাথে উত্তরাধিকার নিয়ে খেলতে পারবেন বুঝতে পারলে আপনি কিছু সুন্দর ঝরঝরে জিনিস করতে পারেন। তবে প্রথমে আসুন ব্যাকগ্রাউন্ডে এই ডক থেকে কিছু বুঝি :

CSS3 এর সাহায্যে আপনি উপাদানগুলিতে একাধিক ব্যাকগ্রাউন্ড প্রয়োগ করতে পারেন। এগুলি একে অপরের শীর্ষে প্রথম পৃষ্ঠভূমি যা আপনি শীর্ষে সরবরাহ করেন এবং পিছনে তালিকাভুক্ত শেষ পটভূমি। শুধুমাত্র শেষ পটভূমিতে কোনও পটভূমির রঙ অন্তর্ভুক্ত থাকতে পারে।

সুতরাং কেউ যখন:

background: red;

তিনি ব্যাকগ্রাউন্ড-রঙকে লাল হিসাবে সেট করছেন কারণ লাল তালিকাভুক্ত করা সর্বশেষ মান।

যখন কেউ করেন:

background: linear-gradient(to right, grey 50%, yellow 2%) red;

রেড আবার পটভূমি রং কিন্তু আপনি যদি একটি গ্রেডিয়েন্ট দেখতে হবে।

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background: inherit;
    }

    <div class="box">
      
     </div>

ব্যাকগ্রাউন্ড-রঙের সাথে এখন একই জিনিস:

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background-color: inherit;
    }

    <div class="box">
      
     </div>

এর কারণ হ'ল কারণ আমরা যখন এটি করি:

background: linear-gradient(to right, grey 50%, yellow 2%) #red;

শেষ সংখ্যাটি ব্যাকগ্রাউন্ড-রঙ সেট করে।

তারপরে আমরা ব্যাকগ্রাউন্ড থেকে উত্তরাধিকারী হওয়ার আগে (তারপরে আমরা গ্রেডিয়েন্টটি পাই) বা পটভূমির রঙ, তারপরে আমরা লাল হয়ে যাই।

Answer 16

একটি জিনিস আমি লক্ষ্য করেছি যে ডকুমেন্টেশনে আমি দেখতে পাচ্ছি না ব্যবহার করছে background: url("image.png")

উপরের মতো সংক্ষিপ্ত হাতটি যদি চিত্রটি পাওয়া না যায় তবে এটি যদি আপনি ব্যবহার করেন তবে তা উপেক্ষা করার পরিবর্তে 302 কোড পাঠায়

background-image: url("image.png") 

Answer 17

পটভূমি এবং ব্যাকগ্রাউন্ড-রঙের সাথে সম্পর্কিত একটি বাগ রয়েছে

এর পার্থক্য, ব্যাকগ্রাউন্ড ব্যবহার করার সময়, কখনও কখনও যখন আপনি সিএসএস ব্যাকগ্রাউন্ডে ওয়েবপৃষ্ঠা তৈরি করেন: #fff // মাস্ক চিত্রের একটি ব্লক ("শীর্ষ আইটেম, পাঠ্য বা চিত্র") চালিয়ে যেতে পারে তাই ব্যাকগ্রাউন্ড- নিরাপদ ব্যবহারের জন্য রঙ, আপনার নকশায় যদি এটি পৃথক হয়

Comments

দুঃখিত যে এটি বোঝায় না। আপনি কি আরও উত্তর দিতে আপনার উত্তর সম্পাদনা করতে পারেন?

— সিফার করুন