CSS background-blend-mode প্রোপার্টি

定义和用法

background-blend-mode 属性定义每个背景层（颜色和/或图像）的混合模式。

另请参阅：

CSS 教程：CSS ব্যাকগ্রাউন্ড

প্রকল্প

把背景图像的混合模式指定为 "lighten"（变亮）：

div { 
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: lighten;
}

আপনার নিজেই প্রয়োগ করুন

পেজের শেষে আপনি আরও TIY উদাহরণ দেখতে পাবেন。

CSS সংজ্ঞা

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

প্রতিভা-মান

মান বর্ণনা
normal ডিফল্ট। মিক্স মোডকে সাধারণ হিসাবে সেট করুন。
multiply মিক্স মোডকে multiply (গুণ) হিসাবে সেট করুন。
screen মিক্স মোডকে screen (স্ক্রিন) হিসাবে সেট করুন。
overlay মিক্স মোডকে overlay (ওভারলে) হিসাবে সেট করুন。
darken মিক্স মোডকে overlay (ওভারলে) হিসাবে সেট করুন。
lighten মিক্স মোডকে lighten (আলোকিত) হিসাবে সেট করুন。
color-dodge মিশ্রণ মোডটিকে color-dodge (রং হালকা করা) হিসাবে নির্দিষ্ট করুন。
saturation মিশ্রণ মোডটিকে saturation (সত্ত্বকল্প) হিসাবে নির্দিষ্ট করুন。
color মিশ্রণ মোডটিকে color (রং) হিসাবে নির্দিষ্ট করুন。
luminosity মিশ্রণ মোডটিকে luminosity (উজ্জ্বলতা) হিসাবে নির্দিষ্ট করুন。

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

ডিফল্ট মান: normal
উত্তরসূরীত্ব: না
এনিমেশন নির্মাণ: সমর্থন না হয়। দেখুন:এনিমেশন-সংক্রান্ত বৈশিষ্ট্য。
সংস্করণ: CSS3
JavaScript সংজ্ঞান: object.style.backgroundBlendMode="screen"

আরও প্রকল্প

প্রকল্প

মিশ্রণ মোডটিকে "multiply" হিসাবে নির্দিষ্ট করুন:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: multiply;
}

আপনার নিজেই প্রয়োগ করুন

প্রকল্প

মিশ্রণ মোডটিকে "screen" হিসাবে নির্দিষ্ট করুন:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: screen;
}

আপনার নিজেই প্রয়োগ করুন

প্রকল্প

মিশ্রণ মোডটিকে "overlay" হিসাবে নির্দিষ্ট করুন:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: overlay;
}

আপনার নিজেই প্রয়োগ করুন

প্রকল্প

মিশ্রণ মোডটিকে "darken" হিসাবে নির্দিষ্ট করুন:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: darken;
}

আপনার নিজেই প্রয়োগ করুন

প্রকল্প

মিশ্রণ মোডটিকে "color-dodge" হিসাবে নির্দিষ্ট করুন:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color-dodge;
}

আপনার নিজেই প্রয়োগ করুন

প্রকল্প

মিশ্রণ মোডটিকে "saturation" হিসাবে নির্দিষ্ট করুন:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: saturation;
}

আপনার নিজেই প্রয়োগ করুন

প্রকল্প

মিশ্রণ মোডটিকে "color" হিসাবে নির্দিষ্ট করুন:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color;
}

আপনার নিজেই প্রয়োগ করুন

প্রকল্প

মিশ্রণ মোডটিকে "luminosity" হিসাবে নির্দিষ্ট করুন:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: luminosity;
}

আপনার নিজেই প্রয়োগ করুন

প্রকল্প

মিশ্রণ মোডটিকে "normal" হিসাবে নির্দিষ্ট করুন:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: normal;
}

আপনার নিজেই প্রয়োগ করুন

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

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

Chrome Edge Firefox Safari স্যাফারি
Chrome Edge Firefox Safari স্যাফারি
অপেরা 35.0 79.0 30.0 7.1