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




css background (3)

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

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

.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>


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

  • 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 ব্যবহার করে ব্যাকগ্রাউন্ড রঙের সাথে মিশ্রিত হয় যা commutative হয় না। এবং যেহেতু এটি চলাচলকারী নয়, অগ্রভাগ এবং পটভূমির রঙগুলি অদলবদলে বিভিন্ন ফলাফল তৈরি করবে।

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

সমাধানটি হ'ল একটি মিশ্রণ মোড যা পরিবর্তনীয় হয়: যেটি কোনও ক্রমে একই জোড়া রঙের জন্য একই রঙ ফেরত দেয় (উদাহরণস্বরূপ গুণিত মিশ্রণ মোড, যা উভয় বর্ণকেই গুণ করে এবং ফলস্বরূপ রঙটি প্রদান করে; বা গা dark় মিশ্রণ মোড, যা প্রত্যাবর্তন করে দুজনের গা 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

সঙ্গে:

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


আপনি সিএসএস সম্পত্তি, mix-blend-mode : multiply ব্যবহার করতে পারেন 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>


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

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

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

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

উপরের স্তরটিতে (অভ্যন্তরীণ স্প্যান) আমাদের অস্বচ্ছতার 0.25 (সুতরাং আমাদের প্রথম রঙের 25% এবং স্বচ্ছ 75% থাকে) তারপরে নীচের স্তরটির জন্য (বাহ্যিক স্প্যান) আমাদের 0.333 অস্বচ্ছতা থাকে (সুতরাং আমাদের 1 / 75% এর 3% = 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 টির চেয়ে বেশি 0.5 হয় তবে আমাদের উভয় রঙের জন্য একই অনুপাত পাওয়া সম্ভব হবে না কারণ প্রথমটির মধ্যে 50% এরও বেশি থাকবে এবং এটি 50% এর চেয়ে কম থাকবে দ্বিতীয়টি:

.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) % 0.5*(1-0.5) ) অনুপাত রয়েছে তাই স্তরগুলি স্যুইচিংয়ের সাথে এই 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 সমান






overlapping