আমি কীভাবে পাঠ্য বা কোনও চিত্রকে সিএসএস ব্যবহার করে স্বচ্ছ পটভূমি দেব?

2282

কেবলমাত্র সিএসএস ব্যবহার করে backgroundকোনও উপাদানকে আধা-স্বচ্ছ তৈরি করতে, কিন্তু উপাদানটির (পাঠ্য এবং চিত্রগুলি) অস্বচ্ছ হতে পারে?

আমি দুটি পৃথক উপাদান হিসাবে পাঠ্য এবং পটভূমি না রেখে এটি সম্পাদন করতে চাই।

চেষ্টা করার সময়:

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}

<p>
  <span>Hello world</span>
</p>

স্নিপেট প্রসারিত করুন

দেখে মনে হচ্ছে শিশু উপাদান তাদের বাবা অস্বচ্ছতা শিকার হয়, তাই opacity:1আপেক্ষিক opacity:0.6পিতা বা মাতা হন।

html css opacity

— স্টিজন স্যান্ডার্স
সূত্র

16

দুঃখের বিষয় নয়, সিএসএস 3 নতুন রঙের মডিউলটির সাথে এটি স্থির করে নিচ্ছে তা যখনই আপনি কোনও রঙ বর্ণিত করেন এটি আপনাকে একটি আলফা মান নির্দিষ্ট করতে দেয়। w3.org/TR/css3-color

— meandmycode

71

প্রকৃতপক্ষে, শিশু উপাদানগুলির অস্বচ্ছতা ওভাররাইড না করে অভিভাবক উপাদানটির অস্বচ্ছতার দ্বারা গুণিত হয়। সুতরাং উদাহরণস্বরূপ যদি যদি pএর অস্বচ্ছতা থাকে .6এবং spanএর অস্বচ্ছতা থাকে .5তবে স্প্যানের পাঠ্যের আসল অস্বচ্ছতা হবে 0.3।

— ছারভে

1

অনুমান করুন, তবে যেহেতু এটি ব্যাকগ্রাউন্ডটি স্বচ্ছ কারণ, আপনার এমনকি ফিল্টার / অস্বচ্ছতা প্রয়োজন নেই: কোডেপেন.আইও

— স্যান্ডার্স

5

@ ছারভে যদি আমি opacity:.5পিতামাতার এবং opacity:2সন্তানের উপাদানগুলির জন্য সংজ্ঞা দিই তবে কী হওয়ার কথা ?

— আলেকজান্ডার

10

@ আলেকজান্ডার, আপনি যে প্রশ্নটি করেছেন তা শুনে আমি আনন্দিত। গাণিতিকভাবে, কেউ সন্দেহ করবে যে শিশুটি 1 এর অস্বচ্ছতার সাথে ফিরে আসবে তবে তবে opacity:2;এটি অবৈধ সিএসএস । opacityসম্পত্তির মান অবশ্যই অন্তর্ভুক্ত ব্যাপ্তির মধ্যে থাকতে হবে [0,1]।

— ছারভে

2276

হয় একটি আধা স্বচ্ছ পিএনজি ব্যবহার করুন চিত্র ব্যবহার করুন বা সিএসএস 3 ব্যবহার করুন:

background-color: rgba(255, 0, 0, 0.5);

এখানে css3.info, অস্বচ্ছতা, আরজিবিএ এবং আপোস (2007-06-03) এর একটি নিবন্ধ রয়েছে ।

<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>

স্নিপেট প্রসারিত করুন

— পিটার মর্টেনসেন
সূত্র

86

হেক্স রঙ সহ এটি করা কি সম্ভব? # Ff এর মত?

— GRM

35

@ জিআরএম: ডাব্লু 3 সি একটি # আরআরজিবিবিএএ হেক্স কোড ফর্ম্যাট চালু করার বিষয়টি বিবেচনা করেছিল, তবে তারা সিদ্ধান্ত নিয়েছে না (বিভিন্ন কারণে), তাই আমরা পারব না।

— outis

95

সঙ্গে @grm Sass আপনি,background-color: rgba(#000, .5);

— ইয়ুর্গেন পল

2

উল্লেখযোগ্য যে আপনি স্বচ্ছতা ব্যবহার করতে চাইলে, আরজিবিএ সমর্থন করে এমন প্রতিটি ব্রাউজার এইচএসএলএকে সমর্থন করে , যা অনেক বেশি স্বজ্ঞাত রঙের ম্যাপিং। আইই 8 হ'ল একমাত্র সিউডোসিগনিফিক্যান্ট ব্রাউজার যা এটি সমর্থন করতে ব্যর্থ হয়, তাই এগিয়ে যায় এবং প্রতিটি রঙের জন্য এইচএসএল (এ) ব্যবহার করে।

— আয়নো

19

@ আউটিস: সুসংবাদ, # আরআরজিবিবিএএ এখন রঙের স্তরে 4 ।

— বোলটলক

476

ফায়ারফক্স 3 এবং সাফারি 3 তে আপনি জর্জি স্কুলির উল্লিখিত আরজিবিএ ব্যবহার করতে পারেন ।

সামান্য পরিচিত কৌশলটি হ'ল আপনি এটি ইন্টারনেট এক্সপ্লোরারে গ্রেডিয়েন্ট ফিল্টারটি ব্যবহার করতে পারেন।

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

প্রথম হেক্স নম্বরটি বর্ণের আলফা মান নির্ধারণ করে।

সমস্ত ব্রাউজারের সম্পূর্ণ সমাধান:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

এটি আরজিবিএ এবং ফিল্টারগুলির মাধ্যমে শিশু উপাদানগুলিকে প্রভাবিত না করে CSS ব্যাকগ্রাউন্ড স্বচ্ছতা থেকে আসে ।

স্ক্রিনশট ফলাফলের প্রমাণ:

নিম্নলিখিত কোড ব্যবহার করার সময় এটি হয়:

 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <title>An XHTML 1.0 Strict standard template</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css" media="all">
         .transparent-background-with-text-and-images-on-top {
             background: rgb(0, 0, 0) transparent;   /* Fallback for web browsers that doesn't support RGBa */
            background: rgba(0, 0, 0, 0.6);   /* RGBa with 0.6 opacity */
             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);  /* For IE 5.5 - 7*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";  /* For IE 8*/
         }
     </style>
 </head>

 <body>
     <div class="transparent-background-with-text-and-images-on-top">
         <p>Here some content (text AND images) "on top of the transparent background"</p>
        <img src="http://i.imgur.com/LnnghmF.gif">
     </div>
 </body>
 </html>

ক্রোম-33 IE11 IE9 IE8

— অ্যাড্রিয়ান হন
সূত্র

1

তবে আইই 8 তে নয়। আমি নতুন-ফিল্টার সিনট্যাক্স চেষ্টা করেছি কিন্তু এটি এখনও আমার পক্ষে কার্যকর হয়নি :(

— ফিলাফ্রেও

5

এই পোস্টটি এটি IE8 এ কীভাবে করবেন তা দেখায়: robertnyman.com/2010/01/11/…

— স্লাপআউট

14

@ ফিলিফ্রেও: আপনি যদি সেবাস্তিয়ান কোডের প্রথম বিটটিকে "ব্যাকগ্রাউন্ড: আরজিবি (0, 0, 0) স্বচ্ছতে পরিবর্তন করেন;" এটি এখন IE8 এ কাজ করা উচিত। বেশ কিছুদিন ধরেই আমার এই বাগদত্তা ছিল!

— টম চ্যান্টলার

ফিল্টার: প্রগড আইই 9. দিয়ে দুর্দান্ত কাজ করে color। রঙ হল: স্বচ্ছতা, লাল, সবুজ, নীল - সমস্ত দুটি অঙ্কের হেক্স মান।

— থারস্টন নিহিউস

1

@ অ্যাড্রিনবি - আপনার নির্দেশাবলী অনুসারে আমি আপনার উত্তর সম্পাদনা করেছি। দুর্ভাগ্যক্রমে আমি কিছু সময়ের জন্য এই বিশেষ প্রশ্নোত্তরের হেডস্পেসের বাইরে ছিলাম, তাই আমি এই মুহুর্তে এই কথোপকথনে যোগ করতে পারি না।

— ব্যবহারকারী 664833

108

এটি সিএসএস ৩ ব্যবহার না করেই আমি নিয়ে আসতে পারি সেরা সমাধান And

একই স্তরে একটি ধারক divএবং দুটি বাচ্চাদের রাখুন, একটি divসামগ্রীর জন্য, একটি পটভূমির জন্য। এবং সিএসএস ব্যবহার করে সামগ্রীটিকে ফিট করার জন্য পটভূমিকে স্বয়ংক্রিয় আকার দিন এবং জেড-ইনডেক্স ব্যবহার করে ব্যাকগ্রাউন্ডটি আসলে পিছনে রাখুন।

.container {
  position: relative;
}
.content {
  position: relative;
  color: White;
  z-index: 5;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: Black;
  z-index: 1;
  /* These three lines are for transparency in all browsers. */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: .5;
}

<div class="container">
  <div class="content">
    Here is the content.
    <br/>Background should grow to fit.
  </div>
  <div class="background"></div>
</div>

স্নিপেট প্রসারিত করুন

— গর্কেম পাকাচি
সূত্র

19

তিনি বলেছিলেন "পাঠ্য এবং ব্যাকগ্রাউন্ডকে আলাদা না করে দুটি উপাদানের একে অপরের উপরে অবস্থিত। যাইহোক ধন্যবাদ, এটি একটি ভাল ফিক্স এবং দরকারী, তবে কিছু ক্ষেত্রে আপনি অস্বচ্ছ উপাদানটি অর্ধ-স্বচ্ছের শিশু হতে চান।

— রল্ফ

আমি অন্য এসও প্রশ্নে বেশ একইরকম উত্তর দিয়েছি তবে একটি জেফিডাল এবং স্ক্রিনশট প্রুফ যুক্ত করেছি (আই 7 +), আগ্রহী হলে এখানে দেখুন stackoverflow.com/a/21984546/759452

— Adrien হউন

@ গার্কেম প্যাকাসি: নিশ্চিত করুন যে অস্বচ্ছতা বৈশিষ্ট্যগুলি "সত্যই" ক্রস ব্রাউজারে রয়েছে, আপনি এই কোড স্নিপেটটি সিএসএসআরটিক্স সিএসএস

— অ্যাড্রিয়েন হোন

কেন এটি একটি সিউডো উপাদান দিয়ে পছন্দ করে :afterনা এবং অতিরিক্ত মার্কআপ এড়ানো যায়?

— ফিশার

64

একটি সাধারণ আধা-স্বচ্ছ পটভূমির রঙের জন্য, উপরের সমাধানগুলি (সিএসএস 3 বা বিজি চিত্র) সেরা বিকল্প। তবে, আপনি যদি কিছু ফ্যানসিয়ার করতে চান (যেমন অ্যানিমেশন, একাধিক ব্যাকগ্রাউন্ড ইত্যাদি), বা আপনি CSS3 এ নির্ভর করতে না চান, আপনি "ফলক কৌশল" চেষ্টা করতে পারেন:

.pane, .pane > .back, .pane > .cont { display: block; }

.pane {
    position: relative;
}

.pane > .back {
    position: absolute;
    width: 100%; height: 100%;
    top: auto; bottom: auto; left: auto; right: auto;
}

.pane > .cont {
    position: relative;
    z-index: 10;
}

<p class="pane">
    <span class="back" style="background-color: green; opacity: 0.6;"></span>
    <span class="cont" style="color: white;">Hello world</span>
</p>

কৌশলটি বাইরের ফলকের উপাদানটির ভিতরে দুটি "স্তর" ব্যবহার করে কাজ করে:

এক ("পিছনে") যা সামগ্রীর প্রবাহকে প্রভাবিত না করে ফলকের উপাদানটির আকারের সাথে ফিট করে,
এবং একটি ("কনটেন্ট") এতে সামগ্রী রয়েছে এবং ফলকের আকার নির্ধারণে সহায়তা করে।

position: relativeফলকে গুরুত্বপূর্ণ; এটি পিছনের স্তরটিকে ফলকের আকারের সাথে ফিট করতে বলে। (আপনি প্রয়োজন ট্যাগ পরম হতে, A থেকে পেন পরিবর্তন একটি থেকে এবং সমস্ত মোড়ানো একটি একেবারে অবস্থানে রয়েছে এমন যে ট্যাগ।)

এই কৌশলটির উপরে উল্লিখিত অনুরূপগুলির চেয়ে বেশি প্রধান সুবিধাটি হ'ল ফলকটি একটি নির্দিষ্ট আকারের হতে হবে না; উপরে কোড করা হিসাবে এটি পুরো-প্রস্থে (স্বাভাবিক ব্লক-উপাদান লেআউট) ফিট করবে এবং কেবলমাত্র সামগ্রীর মতোই উচ্চতর হবে। বাহ্যিক ফলক উপাদানটি আপনি যে কোনও ভাবেই আকার দিতে পারেন, যতক্ষণ না এটি আয়তক্ষেত্রাকার হয় (যেমন ইনলাইন-ব্লক কাজ করবে; প্লেইন-পুরাতন ইনলাইনটি কাজ করবে না)।

এছাড়াও, এটি আপনাকে পটভূমির জন্য অনেক স্বাধীনতা দেয়; আপনি পিছনে উপাদানগুলিতে সত্যিই কিছু রাখতে পারেন এবং এটি সামগ্রীর প্রবাহকে প্রভাবিত না করে (আপনি যদি একাধিক পূর্ণ-আকারের উপ-স্তর চান তবে কেবল তাদেরও অবস্থান আছে তা নিশ্চিত করুন: পরম, প্রস্থ / উচ্চতা: 100%, এবং উপরে / নীচে / বাম / ডান: স্বয়ংক্রিয়)।

ব্যাকগ্রাউন্ড ইনসেট অ্যাডজাস্টমেন্ট (উপরে / নীচে / বাম / ডান মাধ্যমে) এবং / অথবা ব্যাকগ্রাউন্ড পিনিং (বাম / ডান বা উপরে / নীচের অংশগুলির মধ্যে একটি অপসারণের মাধ্যমে) এর পরিবর্তে নিম্নলিখিত সিএসএস ব্যবহার করার জন্য একটি প্রকরণ:

.pane > .back {
    position: absolute;
    width: auto; height: auto;
    top: 0px; bottom: 0px; left: 0px; right: 0px;
}

যেমনটি লেখা আছে, এটি ফায়ারফক্স, সাফারি, ক্রোম, আইই 8 + এবং অপেরাতে কাজ করে, যদিও আই 7 এবং আই 6 এর জন্য অতিরিক্ত সিএসএস এবং এক্সপ্রেশন, আইআইআরসি প্রয়োজন, এবং শেষবার আমি যাচাই করেছিলাম, দ্বিতীয় সিএসএসের ভিন্নতা অপেরাতে কাজ করে না।

দেখার জন্য বিষয়গুলি:

কনট লেয়ারের ভিতরে ভাসমান উপাদানগুলি থাকবে না। আপনার সেগুলি সাফ হয়ে গেছে বা অন্যথায় রয়েছে কিনা তা নিশ্চিত করতে হবে, বা সেগুলি নীচে থেকে সরে যাবে।
মার্জিনগুলি ফলকের উপাদানটিতে যায় এবং প্যাডিংগুলি কনটেন্ট উপাদানগুলিতে যায়। বিপরীতটি ব্যবহার করবেন না (কনট্রোল্টের উপর মার্জিনগুলি বা ফলকে প্যাডিং করা) অথবা আপনি বিজোড়গুলি আবিষ্কার করতে পারবেন যেমন পৃষ্ঠাটি সর্বদা ব্রাউজার উইন্ডোর থেকে কিছুটা প্রশস্ত থাকে।
উল্লিখিত হিসাবে, পুরো জিনিসটি ব্লক বা ইনলাইন-ব্লক হওয়া দরকার। ব্যবহার নির্দ্বিধায় <div>s এর পরিবর্তে s আপনার সিএসএস প্রক্রিয়া সহজ করার জন্য।

একটি পূর্ণাঙ্গ ডেমো, টমটম এটা ব্যবহার করে এই প্রযুক্তিটির flexiblity লোক দেখানো display: inline-block, এবং উভয় সঙ্গে auto& নির্দিষ্ট widthS / min-heightS:

.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
	position: relative;
	width: 175px; min-height: 100px;
	margin: 8px;
}

.pane > .back {
	position: absolute; z-index: 1;
	width: auto; height: auto;
	top: 8px; bottom: 8px; left: 8px; right: 8px;
}

.pane > .cont {
	position: relative; z-index: 10;
}

.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }

<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>

স্নিপেট প্রসারিত করুন

এবং এখানে কৌশলটির একটি লাইভ ডেমো ব্যাপকভাবে ব্যবহৃত হচ্ছে:

— স্লিপ ডি থম্পসন
সূত্র

কোন পরিস্থিতিতে কেউ এর জন্য সিএসএস 3 ব্যবহার করতে চাইবে না?

— বার্কলি 91

@ বার্কলি91 আপনি যদি এটি CSS3 এ করতে পারেন তবে একেবারে এটি ব্যবহার করুন। তবে CSS3 ব্যাকগ্রাউন্ড সব ধরণের সামগ্রী বা সম্পূর্ণ বিন্যাসের নমনীয়তা সমর্থন করে না। উপরের খাম / চিঠি উদাহরণটি স্বাধীনভাবে পুনরাবৃত্তি হওয়া প্রান্ত এবং কেন্দ্র-পূরণ (গুলি) এর কারণে CSS3 দিয়ে বন্ধ করা শক্ত be এছাড়াও, মনে রাখবেন যে এই উত্তরটি মূলত সিএসএস 3 সমর্থন বিস্তারের আগে 5 বছর আগে লেখা হয়েছিল।

— স্লিপ ডি। থমসন

2

@ আইগর ইভানচা আপনার পরিবর্তনগুলি ঘূর্ণিত করে - আমি দুঃখিত, আমার পছন্দসই ফর্ম (ট্যাবগুলি) থেকে আপনার (2 স্পেস) এ ইন্ডেন্টেশন পরিবর্তন করা ভাল নয়। আপনার প্রতিদিনের কোড প্রকল্পগুলিতে 2-স্পেস ইন্ডেন্টেশন ব্যবহার করার উপযুক্ত কারণ থাকতে পারে তবে ওয়েবে উপস্থাপনের জন্য আমি বিশ্বাস করি যে ট্যাবগুলির স্পষ্ট বিজয় রয়েছে — গভীর ইনডেন্টেশনটি স্তরক্রমের স্তরগুলি সনাক্তকরণকে আরও সহজ করে তোলে এবং এটি অনেক দূরে far ট্যাবগুলিকে নির্ভরযোগ্যভাবে স্পেসে রূপান্তর করা সহজ এবং এটি সমস্ত পাঠকের আরও উপযুক্ত compatible

— স্লিপ ডি থম্পসন

@ আইগর ইভানচা এছাড়াও, এটি প্রদর্শিত হয় আপনি একটি বিউটিফায়ার যদিও কোডটি চালিয়েছিলেন যা প্রতিটি সিএসএস নির্বাচক এবং সম্পত্তিটিকে তার নিজস্ব লাইনে রেখে দেয়। আমার উদাহরণগুলি ইচ্ছাকৃত লাইন বিরতি এবং যৌক্তিকভাবে গ্রুপ টুকরো টুকরো করার জন্য রচনা করা হয়েছিল যা পাঠকদের একসাথে বোঝা উচিত - উদাহরণস্বরূপ বেশিরভাগ width:& height:বৈশিষ্ট্যগুলি একটি লাইন ভাগ করে কারণ তারা একই ধরণের নির্মাণ এবং দ্বি-মাত্রিক আকার হিসাবে আরও ভাল বোঝে, না 1-মাত্রিক সীমাবদ্ধতার একটি জুড়ি। তদুপরি, কিছু লাইনের একটি মোটামুটি পরিমাণ তাদের মধ্যে প্যাক করা হয় কারণ এটি পুনরাবৃত্তি সামগ্রী যা দেখানো গুরুত্বপূর্ণ নয়।

— স্লিপ ডি থম্পসন

@ ইগর ইভানচা যৌক্তিক সংগঠন, গোষ্ঠীকরণ এবং স্টাইলিং বোধগম্য, বোধগম্য কোড লেখার জন্য অত্যন্ত গুরুত্বপূর্ণ, যেমনটি এটি সমস্ত ধরণের লেখার মতোই। আপনি যে পরিবর্তনগুলি করেছিলেন তা হ'ল কারও পোস্টে প্রবেশ করা এবং সমস্ত অনুচ্ছেদ বিরতি অপসারণ এবং প্রতিটি বাক্য পরে জোর করে নতুন লাইন স্থাপনের সমতুল্য। আপনি যদি নিজের কাজটিতে সেই উদাসীন পেডেন্টিক হতে চান তবে ভাল, আপনি এটি করতে নির্দ্বিধায়। তবে দয়া করে অন্য লোকের কাজের মধ্যে শব্দার্থক চরিত্র এবং অভিব্যক্তি বোবা না।

— স্লিপ ডি থম্পসন

58

এটি একটি আধা স্বচ্ছ ব্যবহার করা ভাল .png ।

খালি ফটোশপ খুলুন , একটি 2x2পিক্সেল চিত্র তৈরি করুন ( বাছাইয়ের 1x1ফলে ইন্টারনেট এক্সপ্লোরার বাগ তৈরি হতে পারে! ), এটি একটি সবুজ রঙ দিয়ে পূর্ণ করুন এবং "স্তর ট্যাব" -তে অস্বচ্ছতা 60% এ সেট করুন। তারপরে এটি সংরক্ষণ করুন এবং এটি একটি পটভূমি চিত্র করুন:

<p style="background: url(green.png);">any text</p>

এটি দুর্দান্ত ইন্টারনেট এক্সপ্লোরার 6 বাদে অবশ্যই দুর্দান্ত কাজ করে । আরও ভাল ফিক্স উপলব্ধ আছে, তবে এখানে একটি দ্রুত হ্যাক:

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}

— সম্প্রদায়
সূত্র

54

মার্কআপটিকে হ্রাস করার একটি কৌশল আছে: পিকগ্রাউন্ড হিসাবে একটি সিউডো উপাদানটি ব্যবহার করুন এবং আপনি মূল উপাদান এবং এর শিশুদের প্রভাবিত না করেই এতে অস্বচ্ছতা সেট করতে পারেন:

ডেমো

আউটপুট:

একটি সিউডো উপাদান সহ পটভূমি অস্বচ্ছতা

প্রাসঙ্গিক কোড:

p {
  position: relative;
}
p:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .6;
  z-index: -1;
}
/*** The following is just for demo styles  ***/

body {
  background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
  background-size: cover;
}
p {
  width: 50%;
  padding: 1em;
  margin: 10% auto;
  font-family: arial, serif;
  color: #000;
}
img {
  display: block;
  max-width: 90%;
  margin: .6em auto;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
  <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>

স্নিপেট প্রসারিত করুন

ব্রাউজার সমর্থন হ'ল ইন্টারনেট এক্সপ্লোরার 8 এবং তারপরে।

— ওয়েব-টিকি
সূত্র

23

সবচেয়ে সহজ পদ্ধতিটি হ'ল অর্ধ-স্বচ্ছ পটভূমি পিএনজি চিত্র ব্যবহার করা ।

আপনার যদি প্রয়োজন হয় তবে ইন্টারনেট এক্সপ্লোরার 6 এ এটি কাজ করতে আপনি জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন ।

আমি ইন্টারনেট এক্সপ্লোরার 6 এ স্বচ্ছ পিএনজিতে বর্ণিত পদ্ধতিটি ব্যবহার করি ।

এগুলি ব্যতীত, আপনি পাশাপাশি দুটি ভাইবোনের উপাদান ব্যবহার করে এটি জাল করতে পারেন - একটি আধা-স্বচ্ছ তৈরি করুন , তারপরে একেবারে উপরের অংশে একেবারে অবস্থান করুন ।

— ক্রিস
সূত্র

2

আমার যা দরকার তা হল একটি সাধারণ ব্যাকগ্রাউন্ড রঙ, আপনি এই রঙটি দিয়ে কোন আকারের পিএনজির প্রস্তাব করবেন? 1x1 রেন্ডারিংকে অনেক কাজ করবে, অত্যধিক পিক্সেল এই পিএনজিটিকে বেশ বড় করে তোলে (সংকুচিত হওয়ার পরে ফাইল-আকার হওয়া উচিত, তবে এটি ব্যবহারের জন্য এটি

— রোধ করা আবশ্যক

3

আমি 30px x 30px এর মতো কিছু প্রস্তাব দেব, যা 1x1 এর চেয়ে পুনরাবৃত্তি করার সময় কম স্মৃতি ব্যবহার করে এবং ব্যান্ডউইথের ব্যবহারকে হ্রাস করতে এখনও যথেষ্ট ছোট।

— ক্রিস

21

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

সিএসএসে :before(বা :after) ব্যবহার করুন এবং উপাদানটিকে তার আসল অস্বচ্ছতাতে ছেড়ে যাওয়ার জন্য তাদের অস্বচ্ছতা মান দিন। সুতরাং আপনি এটি ব্যবহার করতে পারেন: কোনও ছদ্ম উপাদান তৈরি করার আগে এবং এটির স্বচ্ছ পটভূমি (বা সীমানা) দেওয়ার আগে এবং যে বিষয়বস্তু দিয়ে আপনি অস্বচ্ছ রাখতে চান তা পিছনে সরিয়ে ফেলুনz-index ।

একটি উদাহরণ ( ফ্রিডল ) (নোট করুন যে DIVশ্রেণিটি dadকেবল রঙের সাথে কিছু প্রসঙ্গ এবং বৈপরীত্য সরবরাহ করে, এই অতিরিক্ত উপাদানটির আসলে প্রয়োজন হয় না, এবং লাল আয়তক্ষেত্রটি কিছুটা নীচে এবং ডানদিকে সরানো থাকে যা পিছনে দৃশ্যমান ছেড়ে যায় fancyBgউপাদান):

<div class="dad">
    <div class="fancyBg">
        Test text that should have solid text color lets see if we can manage it without extra elements
    </div>
</div>

এই সিএসএস সহ:

.dad {
    background: lime; border: 1px double black; margin: 1ex 2ex;
    padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
    border: 1px dashed black; position: relative; color: white; font-weight: bold;
    z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
    position: absolute; background: red; opacity: .5;
    top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
    /*top: 0; right: 0; bottom: 0; left: 0;*/
    z-index: -1;
}

এই ক্ষেত্রে .fancyBg:beforeসিএসএস বৈশিষ্ট্য আপনাকে স্বচ্ছতা সঙ্গে চাই আছে (এই উদাহরণে লাল পটভূমির কিন্তু একটি চিত্র বা সীমানা হতে পারে)। এটিকে পিছনে সরিয়ে আনতে এটি পরম হিসাবে অবস্থানযুক্ত .fancyBg(শূন্যের মানগুলি বা আপনার প্রয়োজনের জন্য আরও উপযুক্ত যা ব্যবহার করুন) use

— frozenkoi
সূত্র

17

সমস্যা হচ্ছে, যে পাঠ্য আসলে হয়েছে আপনার উদাহরণে পূর্ণ অস্বচ্ছতা। এটি pট্যাগের মধ্যে সম্পূর্ণ অস্বচ্ছতা আছে , কিন্তুp ট্যাগটি কেবল আধা-স্বচ্ছ।

আপনি সিএসএসে অনুধাবন করার পরিবর্তে একটি অর্ধ-স্বচ্ছ পিএনজি ব্যাকগ্রাউন্ড চিত্র যুক্ত করতে পারেন, বা পৃথক পাঠ্য এবং দুটি উপাদানকে ভাগ করে পাঠ্যটি বাক্সের উপরে সরিয়ে নিতে পারেন (উদাহরণস্বরূপ, নেতিবাচক মার্জিন)।

অন্যথায় এটি সম্ভব হবে না।

ক্রিস যেমন ঠিক উল্লেখ করেছিলেন: আপনি যদি স্বচ্ছতার সাথে একটি পিএনজি ফাইল ব্যবহার করেন তবে আপনাকে জাভাস্ক্রিপ্টের কাজটি জটিলতার সাথে ব্যবহার করতে হবে যাতে এটি অদৃশ্য ইন্টারনেট এক্সপ্লোরারে কাজ করে ...

— SvenFinke
সূত্র

15

প্রায় এই সমস্ত উত্তর ধরে নিল ডিজাইনার একটি দৃ color় রঙের পটভূমি চায়। ডিজাইনার যদি সত্যিই ব্যাকগ্রাউন্ড হিসাবে কোনও ফটো চান তবে এই মুহুর্তের একমাত্র আসল সমাধানটি অন্য কোথাও উল্লিখিত jQuery ট্রান্সফাই প্লাগইনের মতো জাভাস্ক্রিপ্ট is ।

আমাদের যা করা দরকার তা হ'ল সিএসএস ওয়ার্কিং গ্রুপ আলোচনায় যোগ দিন এবং সেগুলি আমাদের একটি ব্যাকগ্রাউন্ড-অস্বচ্ছতা বৈশিষ্ট্য দিন! একাধিক-ব্যাকগ্রাউন্ড বৈশিষ্ট্যটির সাথে এটি হাতে হাতে কাজ করা উচিত।

— thinsoldier
সূত্র

14

আমি এখানে এটি কীভাবে করব (এটি সর্বোত্তম নাও হতে পারে তবে এটি কাজ করে):

divআপনি যেটি অর্ধ-স্বচ্ছ হতে চান তা তৈরি করুন । এটি একটি শ্রেণি / আইডি দিন। খালি রেখে দাও এবং এটি বন্ধ করুন। এটিকে একটি সেট উচ্চতা এবং প্রস্থ দিন (বলুন, 300 পিক্সেল দ্বারা 300 পিক্সেল)। এটি 0.5 এর अस्पष्टতা বা আপনার পছন্দসই রঙ এবং ব্যাকগ্রাউন্ডের রঙ দিন।

তারপর, সরাসরি সেই ডিভের নীচে , একটি পৃথক শ্রেণি / আইডি দিয়ে অন্য একটি ডিভ তৈরি করুন। এর ভিতরে একটি অনুচ্ছেদ তৈরি করুন, যেখানে আপনি নিজের পাঠ্য রাখবেন। দিন divঅবস্থান: আত্মীয় এবং উপরের: -295px(যে নেতিবাচক 295 পিক্সেল)। ভাল পরিমাপের জন্য এটির 2 এর জেড-সূচক দিন এবং এটির অস্বচ্ছতা 1 নিশ্চিত করুন your আপনার অনুচ্ছেদের মতো আপনার পছন্দ মতো স্টাইল করুন তবে নিশ্চিত করুন যে মাত্রাগুলি প্রথমটির চেয়ে কম রয়েছে divযাতে এটি উপচে না পড়ে।

এটাই. কোডটি এখানে:

.trans {
  opacity: 0.5;
  height: 300px;
  width: 300px;
  background-color: orange;
}
.trans2 {
  opacity: 1;
  position: relative;
  top: -295px;
}
.trans2 p {
  width: 295px;
  color: black;
  font-weight: bold;
}

<body>
  <div class="trans">
  </div>
  <div class="trans2">
    <p>
      text text text
    </p>
  </div>
</body>

স্নিপেট প্রসারিত করুন

এটি সাফারি ২.x এ কাজ করে তবে আমি ইন্টারনেট এক্সপ্লোরার সম্পর্কে জানি না।

— রিভস , 5 ব্যবহারকারী 55% প্যারিস আয়নেস্কু
সূত্র

অতিরিক্ত উপাদান এড়ানো যায় এবং পরিবর্তে সিউডো উপাদানটি ব্যবহার করুন :beforeবা:after

— ফ্রোজেনকোই

12

এখানে একটি jQuery প্লাগইন যা আপনার জন্য সমস্ত কিছু পরিচালনা করবে, স্থানান্তর করুন ( কোনও উপাদানটির ব্যাকগ্রাউন্ডে স্বচ্ছতা / অস্বচ্ছতা সহজেই প্রয়োগ করতে একটি jQuery প্লাগইন স্থানান্তর করুন )।

আমি এই সমস্যাটি এখন থেকে এবং তারপরও চালিয়ে যাচ্ছি, তাই আমি এমন কিছু লেখার সিদ্ধান্ত নিয়েছি যা জীবনকে অনেক সহজ করে তুলবে। স্ক্রিপ্টটি 2 কেবি এরও কম এবং এটির কাজ করতে এটির জন্য কেবল একটি লাইন কোডের প্রয়োজন হয় এবং এটি যদি আপনি চান তবে পটভূমির অস্বচ্ছতাও অ্যানিমেটিং পরিচালনা করতে পারবেন।

— joren
সূত্র

11

কিছুক্ষণ আগে, আমি সিএসএস সহ ক্রস ব্রাউজার ব্যাকগ্রাউন্ড ট্রান্সপারেন্সি এ সম্পর্কে লিখেছিলাম ।

উদ্ভট ইন্টারনেট এক্সপ্লোরার 6 আপনাকে পটভূমিকে স্বচ্ছ করতে এবং পাঠ্যটিকে শীর্ষে অস্বচ্ছ রাখার অনুমতি দেবে। অন্যান্য ব্রাউজারগুলির জন্য আমি পরে স্বচ্ছ পিএনজি ফাইল ব্যবহার করার পরামর্শ দিই।

— philnash
সূত্র

10

পটভূমির অস্বচ্ছতা, তবে পাঠ্যের কিছু ধারণা নেই। হয় একটি অর্ধ-স্বচ্ছ চিত্র ব্যবহার করুন, বা একটি অতিরিক্ত উপাদান ওভারলে করুন।

— fearoffours
সূত্র

9

আপনি যদি ফটোশপের লোক হন তবে আপনি এটি ব্যবহার করতে পারেন:

 #some-element {
  background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
 }

বা:

#some-element {
  background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}

— সুরজ কাবাত
সূত্র

8

কোনও উপাদানটির পটভূমিটি অর্ধ-স্বচ্ছ করতে, তবে উপাদানটির অস্বচ্ছ বিষয়বস্তু (পাঠ্য এবং চিত্রগুলি) পেতে আপনাকে সেই চিত্রের জন্য সিএসএস কোড লিখতে হবে এবং আপনাকে opacityন্যূনতম মান সহ একটি বৈশিষ্ট্য যুক্ত করতে হবে ।

উদাহরণ স্বরূপ,

.image {
   position: relative;
   background-color: cyan;
   opacity: 0.7;
}

// মান যত কম হবে ততই স্বচ্ছ হবে, আকৃতির মান কম হবে স্বচ্ছতা।

— পুষ্প সিং
সূত্র

আধুনিক ব্রাউজারগুলিতে এটি করার একটি উপায়। আমি ফালব্যাক হিসাবে এটি আরজিবা মানগুলির সাথে একত্রিত করি

— তাহির খালিদ

হ্যাঁ সঠিক. আধুনিক ব্রাউজারটি মোকাবেলা করার এটি অন্যতম উপায়।

— পুষ্প সিং

"আকরিকের স্বল্পতা স্বচ্ছ হবে" এর অর্থ আপনি কী বোঝেন (এটি বোধগম্য বলে মনে হয়)? ( আপনার উত্তরটি সম্পাদনা করে প্রতিক্রিয়া জানান , উপযুক্ত হলে এখানে মন্তব্যে নয় not)

— পিটার মর্টেনসেন

7

সিএসএস 3 এ আপনার সমস্যার একটি সহজ সমাধান রয়েছে। ব্যবহার করুন:

background-color:rgba(0, 255, 0, 0.5);

এখানে, rgbaলাল, সবুজ, নীল এবং আলফা মান বোঝায়। 255 এর কারণে সবুজ মান প্রাপ্ত হয় এবং অর্ধেক স্বচ্ছতা একটি 0.5 আলফা মান দ্বারা প্রাপ্ত হয়।

— তৌহিদ রহমান
সূত্র

এটি আগের কয়েকটি উত্তর থেকে কীভাবে আলাদা?

— পিটার মর্টেনসেন

6

আপনি যদি কম ব্যবহার করেন তবে আপনি ব্যবহার করতে পারেন fade(color, 30%)।

— Alex
সূত্র

6

পটভূমি-রঙ: rgba (255, 0, 0, 0.5); উপরে উল্লিখিত হিসাবে সেরা উত্তর সহজভাবে করা হয়। এমনকি সিএসএস 3 ব্যবহার 2013 সালেও বলা সহজ নয় কারণ বিভিন্ন ব্রাউজারের সমর্থন স্তরটি প্রতিটি পুনরাবৃত্তির সাথে পরিবর্তিত হয়।

যদিও background-color সমস্ত বড় ব্রাউজারগুলি সমর্থন করে (সিএসএস 3 তে নতুন নয়) [1] আলফা স্বচ্ছতাটি জটিল হতে পারে, বিশেষত 9 সংস্করণের আগে ইন্টারনেট এক্সপ্লোরারের সাথে এবং সংস্করণ 5.1 এর পূর্বে সাফারিতে সীমানা রঙের সাথে। [2]

কম্পাস বা SASS এর মতো কিছু ব্যবহার করা উত্পাদন এবং ক্রস প্ল্যাটফর্মের সামঞ্জস্যকে সত্যই সহায়তা করতে পারে।

[1] ডাব্লু 3 স্কুল: সিএসএসের পটভূমির রঙের সম্পত্তি

[২] নরম্যানের ব্লগ: ব্রাউজার সমর্থন চেকলিস্ট CSS3 (অক্টোবর ২০১২)

— উইল নীলসেন
সূত্র

4

আপনি ইন্টারনেট এক্সপ্লোরার 8 এর জন্য গ্রেডিয়েন্ট সিনট্যাক্স ব্যবহার করে (অ্যাবি) সমাধান করতে পারেন । রঙিন বিন্যাসটি এআরজিবি। আপনি যদি সাস প্রিপ্রসেসর ব্যবহার করে থাকেন তবে আপনি বিল্ট-ইন ফাংশন "অর্থাত্-হেক্স-স্ট্রিং ()" ব্যবহার করে রঙ রূপান্তর করতে পারবেন।

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";

— হেনরিক
সূত্র

4

আপনি খাঁটি সিএসএস 3 ব্যবহার করতে পারেন : আপনি যে স্বচ্ছতার চান তা rgba(red, green, blue, alpha)কোথায় alpha। জাভাস্ক্রিপ্ট বা jQuery জন্য কোন প্রয়োজন নেই।

এখানে একটি উদাহরণ:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}

— পিটার মর্টেনসেন
সূত্র

3

<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
    <img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>

http://jsfiddle.net/x2ukko7u/ ?

— premgowda
সূত্র

2

আপনি rgba color codeনীচে দেওয়া উদাহরণের মতো সিএসএস ব্যবহার করে এটি করতে পারেন ।

.imgbox img{
  height: 100px;
  width: 200px;
  position: relative;
}
.overlay{
  background: rgba(74, 19, 61, 0.4);
  color: #FFF;
  text-shadow: 0px 2px 5px #000079;
  height: 100px;
  width: 300px;
  position: absolute;
  top: 10%;
  left: 25%;
  padding: 25px;
}

<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
  <div class="overlay">
    <p>This is Simple Text.</p>
  </div>
</div>

স্নিপেট প্রসারিত করুন

— রুদ্র
সূত্র

1

একই ডিভের উপর একটি চিত্রের উপরে ওভারলে রাখার আরও সহজ সমাধান রয়েছে। এটি এই সরঞ্জামটির সঠিক ব্যবহার নয়। তবে CSS ব্যবহার করে সেই ওভারলে তৈরি করার জন্য একটি কবিতার মতো কাজ করে।

এটির মতো কোনও ইনসেট শ্যাডো ব্যবহার করুন:

box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);

এখানেই শেষ :)

— edd2110
সূত্র

1

আপনি ব্যবহার করতে পারেন RGBA (red, green, blue, alpha) মধ্যে সিএসএস । এটার মতো কিছু:

সুতরাং এই জাতীয় কিছু করা আপনার ক্ষেত্রে কাজ করবে:

p {
  position: absolute;
  background-color: rgba(0, 255, 0, 0.6);
}

span {
  color: white;
}

— আলিরেজা
সূত্র

1

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

background-color: rgba(71, 158, 0, 0.8);

অস্বচ্ছতার সাথে ব্যাকগ্রাউন্ড রঙ ব্যবহার করুন

background-color: rgba(R, G, B, Opacity);

— বিনোদ কুমার
সূত্র

0

আমি সাধারণত আমার কাজের জন্য এই ক্লাসটি ব্যবহার করি। এটা সত্যিই অনেক দারুণ.

.transparent {
  filter: alpha(opacity=50); /* Internet Explorer */
  -khtml-opacity: 0.5;       /* KHTML and old Safari */
  -moz-opacity: 0.5;         /* Firefox and Netscape */
  opacity: 0.5;              /* Firefox, Safari, and Opera */
}

স্নিপেট প্রসারিত করুন

— চেংকুরু মাইকেল
সূত্র

0

ফর্ম্যাটটি ব্যবহার করার সময় এটি আমার পক্ষে কাজ করেছিল #AARRGGBBযাতে আমার পক্ষে কাজ করা একটাই ছিল #1C00ff00। এটি ব্যবহার করে দেখুন, কারণ আমি দেখেছি এটি কারওর জন্য কাজ করছে এবং অন্য কারও জন্য কাজ করছে না। আমি এটি সিএসএসে ব্যবহার করছি।

— ডোনাল্ড শাহিনী
সূত্র

0

আপনি হেক্সাডেসিমাল মানটিতে যুক্ত হওয়া অস্বচ্ছতা মানটি ব্যবহার করতে পারেন:

background-color: #11ffeeaa;

এই উদাহরণে aaঅস্বচ্ছতা রয়েছে। 00অর্থের অস্বচ্ছতা অর্থ স্বচ্ছ এবং এর ffঅর্থ কঠিন রঙ।

অস্বচ্ছতা isচ্ছিক, তাই আপনি হেক্সাডেসিমাল মানটি বরাবরের মতো ব্যবহার করতে পারেন:

background-color: #11ffee;

আপনি এটি দিয়ে পুরানো উপায়টিও ব্যবহার করতে পারেন rgba():

background-color: rgba(117, 190, 218, 0.5);

এবং backgroundশর্টহ্যান্ড আপনি যদি নিশ্চিত করতে চান যে ব্যাকগ্রাউন্ডে চিত্র বা গ্রেডিয়েন্টের মতো অন্য কোনও স্টাইল নেই:

background: #11ffeeaa;

মজিলার স্পেসিফিকেশন ( https://developer.mozilla.org/en-US/docs/Web/CSS/background-color ) থেকে:

/* Keyword values */
background-color: red;
background-color: indigo;

/* Hexadecimal value */
background-color: #bbff00;    /* Fully opaque */
background-color: #bf0;       /* Fully opaque shorthand */
background-color: #11ffee00;  /* Fully transparent */
background-color: #1fe0;      /* Fully transparent shorthand  */
background-color: #11ffeeff;  /* Fully opaque */
background-color: #1fef;      /* Fully opaque shorthand  */

/* RGB value */
background-color: rgb(255, 255, 128);        /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5);  /* 50% transparent */

/* HSL value */
background-color: hsl(50, 33%, 25%);         /* Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent */

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

— AMS777
সূত্র

-2

আপনি আরজিবিতে রঙের কোডের মতো আরজিবি রঙটি রঙিন কোডের মতো আরজিবিতে (63, 245, 0) এবং অস্বচ্ছতা যুক্ত করতে পারেন (যেমন 63, 245, 0, 0.5) এবং আরজিবিকে আরজিবিএর সাথে প্রতিস্থাপন করতে পারেন। Aঅস্বচ্ছতা জন্য ব্যবহার করা হয়।

div {
  background: rgba(63, 245, 0, 0.5);
}

স্নিপেট প্রসারিত করুন

— বিজয় শর্মা
সূত্র