CSS mix-blend-mode অপারেন্স

সংজ্ঞা ও ব্যবহার

mix-blend-mode বৈশিষ্ট্য নির্দেশ করে এলিমেন্টটির অন্তর্নিহিত বিষয়কে সরাসরি পারস্পরিক পটভূমির সাথে কিভাবে মিশ্রিত করা হবে।

আরও দেখুন:

CSS সংক্ষিপ্ত নির্দেশক:CSS background-blend-mode এট্রিবিউট

প্রয়োগ

লাল পটভূমি সহ কনটেনার এবং এই লাল কনটেনারের সাথে মিশ্রিত ছবি (গভীর):

.container {
  background-color: red;
}
.container img {
  mix-blend-mode: darken;
}

স্বয়ং প্রয়োগ করুন

পানের নিচে আরও TIY ইনস্ট্যান্স পাবেন

CSS সংজ্ঞা

mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;

বৈশিষ্ট্য মান

মান বর্ণনা
normal এটি ডিফল্ট মান।মিক্স মডে সাধারণ হিসাবে সেট করুন。
multiply মিক্স মডে মাল্টিপ্লাই হিসাবে সেট করুন。
screen মিক্স মডে স্ক্রিন হিসাবে সেট করুন。
overlay মিক্স মডে ওভারলে হিসাবে সেট করুন。
darken মিক্স মডে ডারকেন হিসাবে সেট করুন。
lighten মিক্স মডে লাইটেন হিসাবে সেট করুন。
color-dodge মিক্স মডে কলর-ডজ হিসাবে সেট করুন。
color-burn মিক্স মডে কলর-বার্ন হিসাবে সেট করুন。
difference মিক্স মডে ডিফারেন্স হিসাবে সেট করুন。
exclusion মিক্স মডে এক্সক্লুজন হিসাবে সেট করুন。
hue মিক্স মডে হিউ হিসাবে সেট করুন。
saturation মিক্স মডে সেটারেশন হিসাবে সেট করুন。
color মিক্স মডে কলর হিসাবে সেট করুন。
luminosity মিক্স মডে লুমিনোসিটি হিসাবে সেট করুন。

প্রযুক্তিগত বিবরণ

ডিফল্ট মান: normal
পরিচ্ছন্নতা: না
অ্যানিমেশন নির্মাণ: সমর্থিত না। দেখুন:অ্যানিমেশন-সংক্রান্ত বৈশিষ্ট্য.
JavaScript সংজ্ঞা: object.style.mixBlendMode = "darken"

আরও প্রয়োগ

প্রয়োগ

প্রদর্শন সব মানগুলো:

.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}

স্বয়ং প্রয়োগ করুন

প্রয়োগ

মিক্স-ব্লেন্ড-মোড ব্যবহার করে রেসপনসিভ কাটাউট/নকআউট টেক্সট (কাটাউট টেক্সট) তৈরি করুন:

.image-container {
  background-image: url("paris.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

স্বয়ং প্রয়োগ করুন

ব্রাউজার সমর্থন

টেবিলের সংখ্যা এই বৈশিষ্ট্যকে পূর্ণাধিকার দেওয়া প্রথম ব্রাউজারের সংস্করণকে নির্দেশ করে।

চ্রোম IE / এজ ফায়ারফক্স স্যাফারি ওপেরা
41.0 79.0 32.0 8.0 35.0