সজ্জিত অর্ধ-স্বচ্ছ বাক্সগুলির রঙ অর্ডের উপর নির্ভর করে?

Question

দুটি সজ্জিত আধা-ট্রান্সফুল্যান্ট বাক্সের চূড়ান্ত রঙটি কেন আদেশের উপর নির্ভর করে?

আমি উভয় ক্ষেত্রে একই রঙ পেতে যাতে এটি কীভাবে তৈরি করতে পারি?

.a {
  background-color: rgba(255, 0, 0, 0.5)
}

.b {
  background-color: rgba(0, 0, 255, 0.5)
}

<span class="a"><span class="b">          Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>

Comments

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

— ইয়াহস্যাভস

এর মূল্য কী, তার জন্য বাস্তব জীবনে একই জিনিস ঘটে যা 100% স্বচ্ছ নয় এবং সামনে থেকে আলোকিত হয়। সামনের বস্তু থেকে আরও আলো আপনার চোখে পড়ে, সুতরাং উভয় ক্ষেত্রে 50% স্বচ্ছতা থাকলেও এর রঙ চূড়ান্ত রঙের উপর আরও বেশি প্রভাব ফেলে।

— জেপা

@ ইয়াহস্যাভস: গড় 0 এবং 100 হল 50 (পদক্ষেপ 1)। 50 এবং 150 এর গড় গড় 100 (পদক্ষেপ 2)। এর সাথে তুলনা করুন: 150 এবং 0 এর গড় গড় 75 (পদক্ষেপ 1)। 75 এবং 100 গড়ে 87.5 (পদক্ষেপ 2)। বিষয়টি হ'ল তিনটি সংখ্যা সঠিকভাবে ওজন করা হচ্ছে না। একই সাথে সমস্ত সংখ্যার উপর ভিত্তি করে গড়ে গণনা করা প্রয়োজন; আপনি কেবল ধাপে ধাপে গড় ধাপ গণনা করতে পারবেন না। (দ্রষ্টব্য যে গড় গণনা মূলত একটি 50% স্বচ্ছ গণনা different বিভিন্ন স্বচ্ছতার স্তরের জন্য গণনা পরিবর্তন হয় তবে নীতিটি একই থাকে)

— ফ্ল্যাটার

পাঠ শিখেছি: 'মিশ্রণ-মিশ্রণ-মোড: গুণন' সহ আমি স্ট্যাকিং ক্রমের চেয়ে আলাদা একটি রঙ পাব - এটি আমি প্রথম দিকে খুঁজছিলাম! আমি মনে করি @ মুফेंस উত্তর একই সমস্যার সম্মুখীন অন্য যে কোনও ব্যবহারকারীর পক্ষে সবচেয়ে দরকারী। তবে তেমনী আফিফের ব্যাখ্যাগুলি আমার প্রশ্নের ক্ষেত্রে প্রযোজ্য এবং এইচটিএমএল কেন অন্যভাবে আচরণ করে তা বর্ণনা করে (এটি আধা-স্বচ্ছ ফয়েলগুলির মাধ্যমে শারীরিক আলো প্রচারের অনুকরণ করে), তাই সবুজ রঙের টিকটি তার কাছে যায়।

— rmv

Answer 1

কেবলমাত্র উভয় ক্ষেত্রে রঙের সংমিশ্রণটি একই নয় যে শীর্ষ স্তরটির অস্বচ্ছতা নীচের স্তরের রঙকে কীভাবে প্রভাবিত করে ।

প্রথম ক্ষেত্রে, আপনি নীচের 50% নীল এবং 50% স্বচ্ছ দেখতে পাবেন উপরের স্তরটিতে। স্বচ্ছ অংশের মাধ্যমে আপনি নীচের স্তরটিতে 50% লাল রঙ দেখতে পান (সুতরাং আমরা কেবলমাত্র 25% লাল দেখি )। দ্বিতীয় মামলার একই যুক্তি ( লাল এর 50% এবং নীল 25% ); সুতরাং আপনি বিভিন্ন রঙ দেখতে পাবেন কারণ উভয় ক্ষেত্রেই আমাদের একই অনুপাত নেই।

এটি এড়াতে আপনার উভয় রঙের জন্য একই অনুপাত থাকা দরকার।

আমরা কীভাবে একই রঙ পেতে পারি তা আরও ভালভাবে বর্ণনা করার এবং দেখানোর জন্য এখানে একটি উদাহরণ রয়েছে:

উপরের স্তরটিতে (অভ্যন্তরীণ স্প্যান) আমাদের 0.25অস্বচ্ছতা রয়েছে (সুতরাং আমাদের প্রথম রঙের 25% এবং স্বচ্ছ 75% থাকে) তারপরে নীচের স্তরটির (বাইরের স্প্যান) জন্য আমাদের 0.333অস্বচ্ছতা থাকে (সুতরাং আমাদের 1/3 থাকে) রঙের 75% = 25% এবং বাকীটি স্বচ্ছ)। উভয় স্তরগুলিতে আমাদের একই অনুপাত রয়েছে (25%) তাই আমরা স্তরগুলির ক্রমকে বিপরীত হলেও আমরা একই রঙ দেখতে পাই ।

.a {
  background-color: rgba(255, 0, 0, 0.333)
}

.b {
  background-color: rgba(0, 0, 255, 0.333)
}

.a > .b {
  background-color: rgba(0, 0, 255, 0.25)
}
.b > .a {
  background-color: rgba(255, 0, 0, 0.25)
}

<span class="a"><span class="b">          Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>

পার্শ্ব নোট হিসাবে, সাদা পটভূমি রঙগুলি উপস্থাপনকেও প্রভাবিত করছে। এর অনুপাত 50% যা 100% (25% + 25% + 50%) এর যৌক্তিক ফলাফল তৈরি করবে।

আপনি আরও খেয়াল করতে পারেন যে উপরের স্তরটির তুলনায় যদি আপনার উপরের স্তরের অস্বচ্ছতা বেশি থাকে তবে আমাদের উভয় রঙের জন্য একই অনুপাত পাওয়া সম্ভব হবে না 0.5কারণ প্রথমটির মধ্যে ৫০% এর বেশি থাকবে এবং এটি দ্বিতীয়টির জন্য ৫০% এর চেয়ে কম থাকবে এক:

.a {
  background-color: rgba(255, 0, 0, 1) /*taking 40% even with opacity:1*/
}

.b {
  background-color: rgba(0, 0, 255, 1) /*taking 40% even with opacity:1*/
}

.a > .b {
  background-color: rgba(0, 0, 255, 0.6) /* taking 60%*/
}
.b > .a {
  background-color: rgba(255, 0, 0, 0.6) /* taking 60%*/
}

<span class="a"><span class="b">          Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>

সাধারণ তুচ্ছ ঘটনাটি যখন শীর্ষ স্তরটি থাকে opacity:1যা 100% এর অনুপাতের সাথে শীর্ষ রঙ তৈরি করে; এইভাবে এটি একটি অস্বচ্ছ রঙ।

---

আরো সঠিক এবং সুনির্দিষ্ট ব্যাখ্যা এখানে তার রং আমরা উভয় স্তর সমন্বয় পর দেখতে নিরূপণ করতে ব্যবহৃত সূত্র ^{সুত্র} :

ColorF = (ColorT*opacityT + ColorB*OpacityB*(1 - OpacityT)) / factor

কালারফ আমাদের চূড়ান্ত রঙ। কালারটি / কালারবি যথাক্রমে শীর্ষ এবং নীচের রং are অপসিটিটি / অপসিটিবি যথাক্রমে প্রতিটি বর্ণের জন্য উপরের এবং নীচের অপসারণগুলি সংজ্ঞায়িত করা হয়:

factorএই সূত্র দ্বারা সংজ্ঞায়িত করা হয় OpacityT + OpacityB*(1 - OpacityT)।

এটি পরিষ্কার যে আমরা দুটি স্তরটি স্যুইচ করলে factorপরিবর্তন হয় না (এটি একটি ধ্রুবক থাকবে) তবে আমরা পরিষ্কারভাবে দেখতে পারি যে প্রতিটি বর্ণের অনুপাত পরিবর্তিত হবে কারণ আমাদের একই গুণক নেই।

আমাদের প্রাথমিক ক্ষেত্রে, উভয় অস্বচ্ছতা 0.5তাই আমাদের আছে:

ColorF = (ColorT*0.5 + ColorB*0.5*(1 - 0.5)) / factor

উপরে বর্ণিত মত, শীর্ষ বর্ণের অনুপাত 50% ( 0.5) এবং নীচের অংশে 25% ( 0.5*(1-0.5)) অনুপাত রয়েছে তাই স্তরগুলি স্যুইচিংয়ের ফলে এই অনুপাতগুলিও বদলে যাবে; এইভাবে আমরা একটি ভিন্ন চূড়ান্ত রঙ দেখতে ।

এখন আমরা যদি দ্বিতীয় উদাহরণটি বিবেচনা করি তবে আমাদের তা হবে:

ColorF = (ColorT*0.25 + ColorB*0.333*(1 - 0.25)) / factor

এই ক্ষেত্রে আমরা 0.25 = 0.333*(1 - 0.25)দুটি স্তরটি স্যুইচ করার কোনও প্রভাব ফেলবে না; এইভাবে রঙ একই থাকবে।

আমরা তুচ্ছ ঘটনাগুলি পরিষ্কারভাবে সনাক্ত করতে পারি:

• শীর্ষ স্তরের opacity:0সূত্রটি সমান হলেColorF = ColorB
• শীর্ষ স্তরের opacity:1সূত্রটি সমান হলেColorF = ColorT

Comments

@ ক্রিসি হ্যাপি সমস্যা সমাধান করছেন না;) আমি ব্যাখ্যা করছি .. ব্যাখ্যাটি কখনও কখনও ঠিক করার চেয়ে ভাল হয়

— তেমনি আফিফ

এমনকি যদি আপনি একে অপরের থেকে ডিভগুলি গ্রহণ করেন এবং অবস্থান: তবুও তাদের স্ট্যাকের জন্য নিখুঁতভাবে সমস্যা দেখা দেয়।

— ইয়াহস্যাভস

@ ইয়াহস্যাভস সমস্যাটি ঘটবে যদিও আমরা একাধিক ব্যাকগ্রাউন্ড বা এমন কোনও জিনিস ব্যবহার করি যা দুটি রঙকে একে অপরের উপরের করে তোলে (পরম অবস্থান ব্যবহার করে বা না);)

— তেমনী আফিফ

আপনি যদি কোনও টিএলডিআর যুক্ত করতে চান তবে এটি হবে যে তারা অ্যাডেটিভের পরিবর্তে গুণক are

— ক্যারামিরিল

@ ক্যারিমিরিল: "গুণক" এখনও অপারেশনটি কেন চালচলিত নয় তা ব্যাখ্যা করে না।

— এরিক ডুমিনিল

Answer 2

আপনি CSS সম্পত্তি, mix-blend-mode : multiply (সীমিত ব্রাউজার সমর্থন ) ব্যবহার করতে পারেন

.a {
  background-color: rgba(255, 0, 0, 0.5);
  mix-blend-mode: multiply;
}

.b {
  background-color: rgba(0, 0, 255, 0.5);
  mix-blend-mode: multiply;
}

.c {
  position: relative;
  left: 0px;
  width: 50px;
  height: 50px;
}

.d {
  position: relative;
  left: 25px;
  top: -50px;
  width: 50px;
  height: 50px;
}

<span class="a"><span class="b">          Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>

<div class="c a"></div>
<div class="d b"></div>

<div class="c b"></div>
<div class="d a"></div>

Comments

এই তালিকার যে কোনও রঙের মিশ্রণ মোড সম্পর্কে "কমিটেটিভ" কৌশলটি করবে।

— সালমান এ

আকর্ষণীয়, এটি ক্রোমের সাথে কাজ করে তবে এজ দিয়ে নয় (সর্বশেষ উইন্ডোজ 10 আপডেট হিসাবে)।

— হংক ওয়

@ আরএমভি আপনি ওভারলে / নরমাল ব্যতীত অন্য কিছু আশা করবেন কেন? প্রত্যাশিত রঙ যদি আপনি কি অবস্থান একটি লাল বক্স সামনে একটি অস্বচ্ছ নীল বাক্সে? এটি লাল পরিবর্তে নীল হবে বা নীল ও লাল রঙের ফাংশন হবে।

— সালমান এ

@ মোফেন পারফেক্ট উত্তর, তবে আপনি কেন দয়া করে এটির জন্য একটি ব্যাখ্যা যুক্ত করতে পারেন এবং মূল কোডটি কেন হয়নি?

— বার্গি

@ আরএমভি: "সাধারণ" মিশ্রণ মোডটি সবচেয়ে ঘনিষ্ঠভাবে অনুকরণ করে তা আসলে পেইন্ট মিক্সিং। উদাহরণস্বরূপ, যদি আপনি কিছু সাদা পেইন্ট নেন তবে এর অর্ধেকটি লাল রঙের সাথে প্রতিস্থাপন করুন এবং তার পরে অর্ধেকটি গোলাপী পেইন্টটি নীল রঙের সাথে প্রতিস্থাপন করুন, আপনি একটি নীল বেগুনি দিয়ে শেষ করবেন (25% সাদা, 25% লাল, 50%) নীল)। যদি আপনি একই সাদা পেইন্ট দিয়ে শুরু করেন তবে প্রথমে এর অর্ধেকটি নীল এবং তার পরে অর্ধেকটি লাল দিয়ে প্রতিস্থাপন করুন, আপনি পরিবর্তে একটি লালচে বেগুনি (25% সাদা, 25% নীল, 50% লাল) দিয়ে শেষ করবেন।

— ইলমারি করোনেন

Answer 3

আপনি নিম্নলিখিত ক্রমে তিনটি রঙ মিশ্রণ করছেন:

• rgba(0, 0, 255, 0.5) over (rgba(255, 0, 0, 0.5) over rgba(255, 255, 255, 1))
• rgba(255, 0, 0, 0.5) over (rgba(0, 0, 255, 0.5) over rgba(255, 255, 255, 1))

এবং আপনি বিভিন্ন ফলাফল পেতে। এর কারণটি হল যে অগ্রভাগের রঙটি সাধারণ মিশ্রণ মোড ^1,2 ব্যবহার করে ব্যাকগ্রাউন্ড রঙের সাথে মিশ্রিত হয় যা পরিবর্তনীয় ^{3 নয়} । এবং যেহেতু এটি চলাচলকারী নয়, অগ্রভাগ এবং পটভূমির রঙগুলি অদলবদলে বিভিন্ন ফলাফল তৈরি করবে।

¹ মিশ্রণ মোড একটি ফাংশন যা অগ্রভাগ এবং পটভূমির রঙ গ্রহণ করে, কিছু সূত্র প্রয়োগ করে এবং ফলাফলটি রঙ দেয়।

² দুটি রঙ, পটভূমি এবং সম্মুখভাগ দেওয়া, সাধারণ মিশ্রণ মোড কেবল অগ্রভাগের রঙ দেয়।

³ অপারেশনগুলির ক্রম পরিবর্তন করলে ফলাফল পরিবর্তন হয় না যদি কোনও ক্রিয়াকলাপ পরিবর্তন হয় যেমন সংযোজন (1 + 2 = 2 + 1) এবং বিয়োগফল (1 - 2 ≠ 2 - 1) হয় না।

সমাধানটি হ'ল একটি মিশ্রণ মোড যা পরিবর্তনীয় হয়: যেটি কোনও ক্রমে একই জোড়া রঙের জন্য একই রঙ ফেরত দেয় (উদাহরণস্বরূপ গুণিত মিশ্রণ মোড, যা উভয় রঙকেই গুণ করে এবং ফলস্বরূপ রঙ দেয়; বা গা or় মিশ্রণ মোড, যা প্রত্যাবর্তন করে দুজনের গা color় রঙ)।

$(function() {
  $("#mode").on("change", function() {
    var mode = $(this).val();
    $("#demo").find(".a, .b").css({
      "mix-blend-mode": mode
    });
  });
});

#demo > div {
  width: 12em;
  height: 5em;
  margin: 1em 0;
}

#demo > div > div {
  width: 12em;
  height: 4em;
  position: relative;
  top: .5em;
  left: 4em;
}

.a {
  background-color: rgba(255, 0, 0, 0.5);
}

.b {
  background-color: rgba(0, 0, 255, 0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="mode">
  <optgroup label="commutative">
    <option>multiply</option>
    <option>screen</option>
    <option>darken</option>
    <option>lighten</option>
    <option>difference</option>
    <option>exclusion</option>
  </optgroup>
  <optgroup label="non-commutative">
    <option selected>normal</option>
    <option>overlay</option>
    <option>color-dodge</option>
    <option>color-burn</option>
    <option>hard-light</option>
    <option>soft-light</option>
    <option>hue</option>
    <option>saturation</option>
    <option>color</option>
    <option>luminosity</option>
  </optgroup>
</select>

<div id="demo">
  <div class="a">
    <div class="b"></div>
  </div>
  <div class="b">
    <div class="a"></div>
  </div>
</div>

---

সম্পূর্ণতার জন্য, এখানে যৌগিক রঙ গণনা করার সূত্রটি দেওয়া হল:

αs x (1 - αb) x Cs + αs x αb x B(Cb, Cs) + (1 - αs) x αb x Cb

সঙ্গে:

সিএস: অগ্রভূমি বর্ণের রঙ মান
: গুলি: অগ্রভাগের বর্ণের আলফা মান সিবি:
পটভূমির রঙের
মান α
বি: পটভূমির বর্ণের আলফা মান বি: মিশ্রণ ফাংশন

Answer 4

কী ঘটে যায় তার ব্যাখ্যার জন্য, তেমনি আফিফের উত্তর দেখুন।
বিকল্প সমাধান হিসাবে, আপনি একটি স্প্যান নিতে পারেন, aউদাহরণস্বরূপ, এটিকে অবস্থান করুন এবং এটি ভিতরে থাকলে কম জেড-সূচক দিন b। তারপরে স্ট্যাকিং সর্বদা একই হবে: প্রথম লাইনে bশীর্ষে আঁকা এবং দ্বিতীয়টিতে নীচে আঁকা ।aab

.a {
  background-color: rgba(255, 0, 0, 0.5);
}

.b {
  background-color: rgba(0, 0, 255, 0.5);
}

.b .a {position:relative; z-index:-1;}

<span class="a"><span class="b">     Color 1</span></span>
<span class="b"><span class="a">Same Color 2</span></span>