আমি কীভাবে একটি সিএসএস রঙের পরিবর্তনশীলটিতে অস্বচ্ছতা প্রয়োগ করব?

Question

আমি ইলেকট্রনে একটি অ্যাপ্লিকেশন ডিজাইন করছি, তাই আমার কাছে সিএসএস ভেরিয়েবলগুলি অ্যাক্সেস রয়েছে। আমি এখানে বর্ণের পরিবর্তনশীল সংজ্ঞায়িত করেছি vars.css:

:root {
  --color: #f0f0f0;
}

আমি এই রঙটি ব্যবহার করতে চাই main.css, তবে কিছুটা অস্বচ্ছতা প্রয়োগ করে:

#element {
  background: (somehow use var(--color) at some opacity);
}

আমি কীভাবে এটি করতে যাব? আমি কোনও প্রিপ্রসেসর ব্যবহার করছি না, কেবল সিএসএস করছি। আমি একটি সমস্ত-সিএসএস উত্তর পছন্দ করব, তবে আমি জাভাস্ক্রিপ্ট / jQuery গ্রহণ করব।

আমি ব্যবহার করতে পারছি না opacityকারণ আমি এমন একটি পটভূমি চিত্র ব্যবহার করছি যা স্বচ্ছ হওয়া উচিত নয়।

Comments

সুতরাং শোনা যাচ্ছে যে আপনার একাধিক উপাদান ব্যবহার করা উচিত ....

— Epascarello

আমি পছন্দ করতে চাই না, তবে মনে হচ্ছে আমার থাকতে হবে ... :(

— জোশি রবোট

Ahhhhh !!!!! এতো বিরক্তিকর! এখন প্রায় 2020। রঙ চয়নকারী # শীর্ষ রঙ পেয়েছে। আলফা / আরজিবা সাস / স্টাইলাসে কাজ করে না - কারণ এটি কোনও আরজিবি মান নয়। আমি কি প্রতিটি একক রঙের জন্য আমার সিএমএসে 4 টি স্লাইডার লাগাতে পারি?

— শেরিফডেরেক

Answer 1

আপনি একটি বিদ্যমান রঙের মান নিতে এবং এটিতে একটি আলফা চ্যানেল প্রয়োগ করতে পারবেন না। যথা, আপনি কোনও বিদ্যমান হেক্স মান নিতে পারবেন না যেমন #f0f0f0, এটি একটি আলফা উপাদান দিন এবং ফলাফলটি অন্য কোনও সংখ্যার সাথে ব্যবহার করতে পারেন।

তবে কাস্টম বৈশিষ্ট্যগুলি আপনাকে আপনার হেক্স মানটি আরজিবি ট্রিপলেটে ব্যবহারের জন্য রূপান্তর করতে rgba(), কাস্টম সম্পত্তিতে (কমা সহ!) সেই মানটি সংরক্ষণ করে, সেই মানটি আপনার পছন্দসই আলফা মানের সাথে var()একটি rgba()ফাংশনে ব্যবহার করে বিকল্প হিসাবে রাখবে এবং এটি হবে কেবলই কাজ করো:

:root {
  /* #f0f0f0 in decimal RGB */
  --color: 240, 240, 240;
}

body {
  color: #000;
  background-color: #000;
}

#element {
  background-color: rgba(var(--color), 0.8);
}

<p id="element">If you can see this, your browser supports custom properties.</p>

এটি সত্য হতে প্রায় খুব ভাল বলে মনে হচ্ছে। ¹ এটি কিভাবে কাজ করে?

সত্য যে কাস্টম বৈশিষ্ট্য মান প্রতিস্থাপিত হয় জাদু মিথ্যা হিসাবে যখন প্রতিস্থাপন var(), একটি সম্পত্তি মান রেফারেন্স সামনে যে সম্পত্তি মান নির্ণয় করা হয়। এর অর্থ হ'ল কাস্টম বৈশিষ্ট্যগুলির হিসাবে, --colorআপনার উদাহরণের মান কোনও রঙের মান নয় যতক্ষণ না কোনও var(--color)অভিব্যক্তি কোথাও উপস্থিত হয় যা রঙের মান আশা করে না (এবং কেবলমাত্র সেই প্রসঙ্গে)। সিএসএস-ভেরিয়েবল স্পেকের বিভাগের ২.১ থেকে :

কাস্টম বৈশিষ্ট্যের জন্য অনুমোদিত সিনট্যাক্স অত্যন্ত অনুমোদিত is <ডিক্লেয়ারেশন- ভ্যালু> উত্পাদনটি এক বা একাধিক টোকেনের যে কোনও অনুক্রমের সাথে মেলে, যতক্ষণ না এই সিক্যুয়েন্স <<- স্ট্রিং- টোকেন>, <bad-url- টোকেন>, মিল নেই <) - টোকেন>, <] - টোকেন>, বা <} - টোকেন>, বা শীর্ষ স্তরের <সেমিকোলন- টোকেন> টোকেন বা <delim- টোকেন> টোকেন "!" এর মান সহ।

উদাহরণস্বরূপ, নিম্নলিখিতটি একটি বৈধ কাস্টম সম্পত্তি:

--foo: if(x > 5) this.width = 10;

যদিও এই মানটি ভেরিয়েবল হিসাবে স্পষ্টতই অকেজো, এটি যে কোনও সাধারণ সম্পত্তিতে অবৈধ হবে, এটি জাভাস্ক্রিপ্ট দ্বারা পড়া এবং এতে কাজ করা হতে পারে।

এবং বিভাগ 3 :

যদি কোনও সম্পত্তিতে এক বা একাধিক var () ফাংশন থাকে এবং সেই ফাংশনগুলি সিন্থেটিকভাবে বৈধ হয় তবে পুরো সম্পত্তির ব্যাকরণকে বিশদ সময় বিবেচনা করে বৈধ বলে ধরে নিতে হবে। ভার () ফাংশনগুলি প্রতিস্থাপনের পরে এটি কেবল গণনা-মান সময়ে সিনট্যাক্স-পরীক্ষা করা হয়।

এর অর্থ হল যে 240, 240, 240আপনি উপরে যে মানটি দেখছেন তা ঘোষণার গণনা করার আগে সরাসরি rgba()ফাংশনে প্রতিস্থাপিত হয়। আমার স্নাতকের:

#element {
  background-color: rgba(var(--color), 0.8);
}

যা প্রথমে বৈধ সিএসএস হিসাবে দেখা যাচ্ছে না কারণ rgba()চারটি কমা-বিভাজিত সংখ্যাসূচক মানের চেয়ে কম হবে বলে প্রত্যাশা করে:

#element {
  background-color: rgba(240, 240, 240, 0.8);
}

যা অবশ্যই পুরোপুরি কার্যকর সিএসএস।

এটিকে আরও একধাপ এগিয়ে নিয়ে যাওয়াতে আপনি আলফা উপাদানটিকে নিজস্ব কাস্টম সম্পত্তিতে সঞ্চয় করতে পারেন:

:root {
  --color: 240, 240, 240;
  --alpha: 0.8;
}

এবং একই ফলাফল সহ এটি বিকল্প করুন:

#element {
  background-color: rgba(var(--color), var(--alpha));
}

এটি আপনাকে বিভিন্ন আলফা মানগুলি দেয় যা আপনি ফ্লাই-এ-এ ঘুরে দেখতে পারেন have

---

¹ _{ঠিক আছে, আপনি যদি ব্রাউজারে কোড স্নিপেট চালাচ্ছেন যা কাস্টম বৈশিষ্ট্যগুলি সমর্থন করে না।}

Comments

এটি সুন্দর

— রবার্ট-এস

@ রবার্ট: এটি এমন একটি বিষয় যা আমি আগে এই উত্তরগুলি পোস্ট করার সাথে সাথে দেখেছিলাম, বাস্তবে আমার তা বুঝতে হবে ।

— বোল্টক্লক

আমরা এই Var চলুন, কেন ভালো কিছু ব্যবহার করবেন: .element2 { background-color: rgba(var(--red), var(--low-opacity); }। আপনি ভেরিয়েবল ব্যবহার সম্পূর্ণভাবে ব্যবহার করতে পারেন :)।

— রবার্ট-এস

দুর্ভাগ্যক্রমে, মানটি "240, 240, 240"কোনও চয়নকারী দ্বারা সম্পাদনযোগ্য নয়। আপনার জিইউআইয়ের জন্য যখন সঠিক রঙগুলি খুঁজে পাওয়া দরকার তখন এটি একটি বিশাল মিস।

— ফ্রি

@ s3c সিনট্যাক্সটি var(--hex-color)99দুটি টোকনে রূপান্তরিত হয়েছে #333333 99(টোকেন পৃথক করার জন্য স্থানটি লক্ষ্য করুন) যা সম্ভবত আপনি চান তা নয়। কাস্টম বৈশিষ্ট্যগুলি মূলত টোকেনগুলি অনুলিপি করতে সংজ্ঞায়িত করা হয়েছিল, স্ট্রিং নয় এবং এটিই শেষ ফলাফল। এখনই এটি ঠিক করতে দেরি হয়ে গেছে।

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

Answer 2

আমি জানি ওপি একটি প্রিপ্রসেসর ব্যবহার করছে না, তবে নীচের তথ্যগুলি এখানে উত্তরের অংশ হলে আমার সহায়তা করা হত (আমি এখনও মন্তব্য করতে পারি না, অন্যথায় আমি @ বলটলক উত্তরটি মন্তব্য করতাম)

আপনি যদি ব্যবহার করে থাকেন, যেমন: scss, উপরের উত্তরটি ব্যর্থ হবে, কারণ এসএসএস স্ক্যাস-নির্দিষ্ট rgba () / hsla () ফাংশন দিয়ে স্টাইলগুলি সংকলনের চেষ্টা করে, যার জন্য 4 টি পরামিতি প্রয়োজন। তবে, rgba () / hsla () এছাড়াও নেটিভ সিএসএস ফাংশন, তাই আপনি এসএসএস ফাংশনটি বাইপাস করতে স্ট্রিং ইন্টারপোলেশন ব্যবহার করতে পারেন।

উদাহরণ (sass 3.5.0+ এ বৈধ):

:root {
    --color_rgb: 250, 250, 250;
    --color_hsl: 250, 50%, 50%;
}

div {
    /* This is valid CSS, but will fail in a scss compilation */
    background-color: rgba(var(--color_rgb), 0.5);
    
    /* This is valid scss, and will generate the CSS above */
    background-color: #{'rgba(var(--color_rgb), 0.5)'};
}

<div></div>

নোট করুন যে স্ট্রিং ইন্টারপোলেশনটি নন-সিএসএস এসএসএস ফাংশনগুলির জন্য কাজ করবে না lighten(), কারণ ফলাফল কোডটি কার্যকরী সিএসএস নয়। এটি এখনও বৈধ scss হবে, সুতরাং আপনি সংকলনের কোন ত্রুটি পাবেন না।

Comments

আপনি যদি নিজের সাস। এসএসএস ফাইলগুলিতে নেটিভ সিএসএস রঙের ফাংশন ব্যবহার করতে পছন্দ করেন তবে সাসের পরিচালনা পরিচালনাকে ওভাররাইড করতে এবং সেগুলি দিয়ে যাওয়ার জন্য আপনার ফাইলের শীর্ষে নিম্নলিখিত ফাংশন সংজ্ঞাগুলি অন্তর্ভুক্ত করতে পারেন: @function rgb($args...) { @return #{'rgb(#{$args})'}; } @function rgba($args...) { @return #{'rgba(#{$args})'}; } @function hsl($args...) { @return #{'hsl(#{$args})'}; } @function hsla($args...) { @return #{'hsla(#{$args})'}; }`` ``

— লুনসন

rgbargbবেশ কিছু সময়ের জন্য একটি প্রতিশব্দ এটি .. তাই আপনাকে "এ" ড্রপ করার অনুমতি দেওয়া হয়।

— s3c

এসএসএস ফাইলগুলির জন্য আর একটি কার্যকারিতা হ'ল বড় হাতের অক্ষর ( RGB) ব্যবহার করা যা পরে স্যাস দ্বারা উপেক্ষা করা হয়। উদাহরণ: color: RGB(var(--color_rgb), 0.5);। গিটহাব

— জোনো জোব

Answer 3

আমি একই পরিস্থিতিতে ছিলাম, তবে দুর্ভাগ্যক্রমে প্রদত্ত সমাধানগুলি আমার পক্ষে কার্যকর হয়নি, কারণ ভেরিয়েবলগুলি বর্ণের নাম থেকে rgbশুরু hslকরে hexবা রঙ পর্যন্ত কিছু হতে পারে ।
আমি background-colorএবং opacityসিডো :afterবা :beforeউপাদানটিতে প্রয়োগ করে এই সমস্যাটি এখনই সমাধান করেছি :

.container {
    position: relative;
}

.container:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    background-color: var(--color);
    opacity: 0.3;
}

পটভূমিতে প্রয়োগ করা উচিত উপাদানের উপর নির্ভর করে শৈলীদের কিছুটা পরিবর্তন করা দরকার।
এছাড়াও এটি সমস্ত পরিস্থিতিতে কার্যকর নাও হতে পারে তবে আশা করি এটি কিছু ক্ষেত্রে সহায়তা করে যেখানে অন্যান্য সমাধানগুলি ব্যবহার করা যায় না।

সম্পাদনা: আমি কেবল লক্ষ্য করেছি, এই সমাধানটি স্পষ্টতই পাঠ্যের রঙকেও প্রভাবিত করে, কারণ এটি লক্ষ্য উপাদানটির সামনে একটি উপাদান তৈরি করে এবং এতে স্বচ্ছ পটভূমির রঙ প্রয়োগ করে।
এটি কিছু ক্ষেত্রে সমস্যা হতে পারে।

Comments

এতে কেবল রঙের আরও নমনীয় স্পেসিফিকেশন (যেমন, একটি নাম, বা rgbবা HSL) অনুমতি দেওয়ার সুবিধা নেই তবে নেটিভ সিএসএস রঙ ফাংশন এবং সাসের রঙ ফাংশনগুলির মধ্যে যে কোনও দ্বন্দ্ব এড়ানো যায়। দেখুন SimplyPhy এর উত্তর নিচে।

— জিম

আমি মনে করি এটি ব্যবহার করা ভাল :beforeso যাতে আপনি না খেলে সঠিক স্ট্যাকিং অর্ডার পান z-index।

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

Answer 4

এই প্রকৃতপক্ষে সিএসএস সম্ভব । এটি কিছুটা নোংরা, এবং আপনাকে গ্রেডিয়েন্টগুলি ব্যবহার করতে হবে। আমি উদাহরণ হিসাবে একটি ছোট স্নিপেট কোড করেছি, নোট করুন যে গা dark় ব্যাকগ্রাউন্ডের জন্য, আপনার কালো অস্বচ্ছতা ব্যবহার করা উচিত, হালকা সাদা হিসাবে:

:root {
  --red: rgba(255, 0, 0, 1);
  --white-low-opacity: rgba(255, 255, 255, .3);
  --white-high-opacity: rgba(255, 255, 255, .7);
  --black-low-opacity: rgba(0, 0, 0, .3);
  --black-high-opacity: rgba(0, 0, 0, .7);
}

div {
	width: 100px;
	height: 100px;
	margin: 10px;
}
    
    
.element1 {
	background: 
        linear-gradient(var(--white-low-opacity), var(--white-low-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}

.element2 {
	background: 
        linear-gradient(var(--white-high-opacity), var(--white-high-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}
    
.element3 {
	background: 
        linear-gradient(var(--black-low-opacity), var(--black-low-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}

.element4 {
	background: 
        linear-gradient(var(--black-high-opacity), var(--black-high-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}

<div class="element1">hello world</div>
<div class="element2">hello world</div>
<div class="element3">hello world</div>
<div class="element4">hello world</div>

Comments

আপনার পটভূমি-আকার নির্দিষ্ট করার দরকার নেই - গ্রেডিয়েন্টগুলির কোনও অভ্যন্তরীণ আকার নেই এবং ফলস্বরূপ স্বয়ংক্রিয়ভাবে প্রসারিত হবে।

— BoltClock

@ বোল্টক্লক হ্যাঁ, আমি আক্ষরিকভাবে ভেবেছিলাম এটি পোস্ট করার সময়, কোডেপেনের চারপাশে খেলা কেবল কিছুটা ছিল;)। পরিষ্কার এখন, ধন্যবাদ!

— রবার্ট-এস

এটি বুদ্ধিমান, গত বছর যখন আমি একইরকম প্রশ্নের উত্তর দিয়েছিলাম তখন আমি একে অপরের উপরে সলিড-কালার গ্রেডিয়েন্টগুলি রাখার কথা ভাবি নি । এই প্রশ্নটি সম্ভবত যেভাবেই লেখা হয়েছিল, আরও সাধারণ, আমি যে উত্তর দিয়েছি তা একটি খুব নির্দিষ্ট ব্যবহারের ক্ষেত্রে for

— BoltClock

ব্যাকগ্রাউন্ডগুলি যদিও আলাদা হয় তবে এটি সত্যিকার অর্থে কাজ করে না, আমি এখন 'ধোঁকায়' প্রয়োগ করার সময় একটি সাদা পটভূমি (255,255,255) ধরে নিয়েছি। এটি সম্ভবত ওপির মূল পটভূমির রঙের ডিফল্ট হতে পারে। তবে আবার, সাদা ব্যাকগ্রাউন্ড সম্ভবত সবচেয়ে হালকা রঙের প্রসারকে সম্ভবত প্রসারিত করবে যাতে লোকেরা এটি লক্ষ্য করবে না।

— রবার্ট-এস

আমি সবেমাত্র এমন কিছু আবিষ্কার করেছি যা অবিশ্বাস্য। আমি এখন একটি উত্তর পোস্ট করেছি।

— BoltClock

Answer 5

:root{
--color: 255, 0, 0;
}

#element{
    background-color: rgba(var(--color), opacity);
}

যেখানে আপনি 0 এবং 1 এর মধ্যে যে কোনও কিছু দিয়ে অস্বচ্ছতা প্রতিস্থাপন করেন

Comments

এই প্রশ্নের উত্তর দেওয়ার চেষ্টা কি? কারণ যদি তাই হয় তবে কোডটি আসলেই বোঝা যায় না। বিশেষত rgba(var(--color), opacity)বিট। বিশেষত যেহেতু আপনার কাস্টম সম্পত্তির মান পুরো rgb () স্বরলিপি। তবে "ধোঁয়া" শব্দটির কারণেও।

— বোল্টক্লক

ওফস আমার খারাপ আরজিবি অংশগুলি ভারে থাকা উচিত নয়

— পিজা লর্ড

Answer 6

এসসিএসএস / এসএএসএস

সুবিধা: প্রতিটি চ্যানেলের জন্য (8-2 বিট) পরিবর্তে আপনি কেবলমাত্র হেক্স রঙের মানগুলি ব্যবহার করতে পারেন।

এটির প্রাথমিক ধারণাটি দিয়ে আমি এটি এটি করেছি: https://codyhouse.co/blog/post/how-to-combine-sass-color-funitions-and-css-variables

সম্পাদনা করুন: আপনি #{$color-name}-rgbউত্পাদিত * -r, * -g, * -b সিএসএস ভেরিয়েবলগুলি স্রেফ ব্যবহার করতে এবং বাদ দিতে আলফা ফাংশনটিও পরিবর্তন করতে পারেন ।

---

ফলাফল

body {
  --main-color: rgb(170, 68, 204);
  --main-color-rgb: 170,68,204;
  --main-color-r: 170;
  --main-color-g: 68;
  --main-color-b: 204;
}

.button-test {
  // Generated from the alpha function
  color: rgba(var(--main-color-r), var(--main-color-g), var(--main-color-b), 0.5);
  // OR (you wrote this yourself, see usage)
  color: rgba(var(--main-color-rgb), 0.5);
}

ব্যবহার:

body {
    @include defineColorRGB(--main-color, #aa44cc);
}

.button-test {
  // With alpha function:
  color: alpha(var(--main-color), 0.5);
  // OR just using the generated variable directly
  color: rgba(var(--main-color-rgb), 0.5);
}

মিশিন এবং ফাংশন

@mixin defineColorRGB($color-name, $value) {
    $red: red($value);
    $green: green($value);
    $blue: blue($value);
    #{$color-name}: unquote("rgb(#{$red}, #{$green}, #{$blue})");
    #{$color-name}-rgb: $red,$green,$blue;
    #{$color-name}-r: $red;
    #{$color-name}-g: $green;
    #{$color-name}-b: $blue;
}

// replace substring with another string
// credits: https://css-tricks.com/snippets/sass/str-replace-function/
@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);
    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }
    @return $string;
}

@function alpha($color, $opacity) {
    $color: str-replace($color, 'var(');
    $color: str-replace($color, ')');
    $color-r: var(#{$color+'-r'});
    $color-g: var(#{$color+'-g'});
    $color-b: var(#{$color+'-b'});
    @return rgba($color-r, $color-g, $color-b, $opacity);
}

আশা করি এটি কারও কিছুটা সময় সাশ্রয় করবে।

Comments

আমি এই পদ্ধতির পছন্দ। ধন্যবাদ

— টনিগট্ট

Answer 7

আপনি প্রতিটি রঙের জন্য নির্দিষ্ট পরিবর্তনশীল / মান সেট করতে পারেন - আসল এবং অস্বচ্ছতার সাথে একটি:

:root {
  --color: #F00;
  --color-opacity: rgba(255, 0, 0, 0.5);
}
#a1 {
  background: var(--color);
} 
#a2 {
  background: var(--color-opacity);
}

<div id="a1">asdf</div>
<div id="a2">asdf</div>

আপনি যদি এটি ব্যবহার করতে না পারেন এবং জাভাস্ক্রিপ্ট সমাধানে আপনি ঠিক আছেন তবে আপনি এটি ব্যবহার করতে পারেন:

$(function() {
  $('button').click(function() {
    bgcolor = $('#a2').css('backgroundColor');
    rgb_value = bgcolor.match(/\d+,\s?\d+,\s?\d+/)[0]
    $('#a2').css('backgroundColor', 'rgba(' + rgb_value + ', 0.5)');
  });
});

:root {
  --color: #F00;
}
#a1 {
  background: var(--color);
} 
#a2 {
  background: var(--color);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a1">asdf</div>
<div id="a2">asdf</div>
<button>Click to change opacity</button>

Comments

অস্বচ্ছতাটির মানটি পরিবর্তিত হবে, সুতরাং প্রতিটি ধরণের অস্বচ্ছতার জন্য ভেরিয়েবল তৈরি করা বিরক্তিকর হবে।

— জোশিরোবট

Answer 8

সাধারণ CSS ভেরিয়েবল সহ rgba () ব্যবহারের জন্য এটি ব্যবহার করে দেখুন:

1. আপনার রঙটি ভিতরে ঘোষণা করুন: মূল, তবে অন্যান্য উত্তরগুলির মতো আরজিবি () ব্যবহার করবেন না। শুধু মান লিখুন

:root{
  --color : 255,0,0;
  }

2. অন্যান্য উত্তর হিসাবে var () ব্যবহার করে - রঙের পরিবর্তনশীল ব্যবহার করুন

#some-element {
  color : rgba(var(--color),0.5);
}

Answer 9

সিএসএসে আপনি হয় rgba মান ব্যবহার করতে সক্ষম হবেন:

#element {
  background: rgba(240, 240, 240, 0.5);
}

বা কেবল অস্বচ্ছতা সেট করুন:

#element {
  background: #f0f0f0;
  opacity: 0.5;    
}

Comments

আমি আরজিবা মানকে হার্ডকোড করতে অক্ষম, আমি রঙ পরিবর্তনশীল ব্যবহার করছি। আমার উল্লেখ করা উচিত ছিল আমি অস্বচ্ছতা ব্যবহার করতে পারি না কারণ আমার একটি পটভূমি চিত্র থাকবে যা স্বচ্ছ হওয়া উচিত নয়।

— জোশিরোবট

এটি কোনও সমাধান বি / সি নয় যদি আপনি কেবল বিজিটির স্বচ্ছতা বজায় রাখতে চান তবে সম্পূর্ণ উপাদানটির অস্বচ্ছতা থাকে তবে সবকিছুতে অস্বচ্ছতা যুক্ত করা সহায়ক নয়।

— লেভিডপস

Answer 10

আপনি যদি আমার মতো হেক্স রঙ পছন্দ করেন তবে অন্য একটি সমাধান রয়েছে। হেক্স মানটি 6 অঙ্কের পরে আলফা মান। 00 এর 100% স্বচ্ছতা 99 প্রায় 75% হয় তবে এটি 'a1-af' বর্ণমালা ব্যবহার করে তারপরে 'b1-bf' 'ff' দিয়ে শেষ হয় যা 100% অস্বচ্ছ।

:root {
--color: #F00;
}

#element {
background: var(--color)f6;
}

Comments

দুর্ভাগ্যক্রমে, আমি মনে করি না এটি কাজ করে। 8 ডিজিটের হেক্স কোড সমর্থনটি ছড়িয়ে পড়তে শুরু করছে, তবে এটি গ্রহণযোগ্য উত্তরের সাথে ব্যবহৃত কৌশলটি তাদের সাথে কাজ করে বলে মনে হচ্ছে না। উদাহরণ: jsbin.com/nacuharige/edit?css,output

— জোশি রবোট

এটি কাজ করে না, যদিও এটি করা থাকলে এটি একটি দুর্দান্ত সমাধান হবে।

— ব্র্যাডেন রকওয়েল নেপিয়ার