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 |
- পূর্ববর্তী পৃষ্ঠা মিন-ওয়াইডথ
- পরবর্তী পৃষ্ঠা @ন্যামেসপেস