tag - কিভাবে CSS ব্যাকগ্রাউন্ড রঙ সিএসএস স্বচ্ছ




কিভাবে html তৈরি করা যায় (4)

অস্পষ্টতা আপনাকে translucency বা স্বচ্ছতা দেয়। এখানে একটি উদাহরণ Fiddle দেখুন। 

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";       /* IE 8 */
filter: alpha(opacity=50);  /* IE 5-7 */
-moz-opacity: 0.5;          /* Netscape */
-khtml-opacity: 0.5;        /* Safari 1.x */
opacity: 0.5;               /* Good browsers */

নোট: here

দেখুন http://css-tricks.com/snippets/css/cross-browser-opacity/

আমি CSS3 ব্যবহার করছি না। তাই আমি opacity বা filter বৈশিষ্ট্য ব্যবহার করতে পারবেন না। এই বৈশিষ্ট্যগুলি ব্যবহার না করেই আমি কীভাবে background-color div স্বচ্ছ করতে পারি? এটি এই link পাঠ্য বাক্সের উদাহরণের মতো হওয়া উচিত। এখানে টেক্সট বক্স ব্যাকগ্রাউন্ড রঙ স্বচ্ছ। আমি একই করতে চাই, কিন্তু উপরে উল্লিখিত গুণাবলী ব্যবহার না করে।

এটি আলোচনার জন্য কিছুটা দেরী হতে পারে তবে অবশ্যম্ভাবীভাবে কেউ এই পোস্টে যেমনটা করেছিল তেমনই থামবে। আমি যে উত্তরটি খুঁজছিলাম তা আমি খুঁজে পেয়েছিলাম এবং ভাবলাম আমি আমার নিজের পোস্টটি পোস্ট করব। নিম্নোক্ত JSFiddle কীভাবে PNG এর স্বচ্ছতার সাথে লে। ডিস্কের সিএসএসের জন্য স্বচ্ছতার বৈশিষ্ট্য জার্স্কার উল্লেখ ছিল সমাধান: http://jsfiddle.net/jyef3fqr/

এইচটিএমএল: 

   <button id="toggle-box">toggle</button>
   <div id="box" style="display:none;" ><img src="x"></div>
   <button id="toggle-box2">toggle</button>
   <div id="box2" style="display:none;"><img src="xx"></div>
   <button id="toggle-box3">toggle</button>
   <div id="box3" style="display:none;" ><img src="xxx"></div>

সিএসএস: 

#box {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:1;
}
#box2 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
      #box3 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
 body {background-color:#c0c0c0; }

জাতীয়: 

$('#toggle-box').click().toggle(function() {
$('#box').animate({ width: 'show' });
}, function() {
$('#box').animate({ width: 'hide' });
});

$('#toggle-box2').click().toggle(function() {
$('#box2').animate({ width: 'show' });
}, function() {
$('#box2').animate({ width: 'hide' });
});
$('#toggle-box3').click().toggle(function() {
$('#box3').animate({ width: 'show' });
 }, function() {
$('#box3').animate({ width: 'hide' });
});

এবং আমার আসল অনুপ্রেরণা: http://jsfiddle.net/5g1zwLe3/ আমি স্বচ্ছ পিএনজি তৈরির জন্য পেইন্ট.net ব্যবহার করতাম, বা PNG এর স্বচ্ছ BG এর সাথে।

opacity সমস্যাটি হল যে এটি বিষয়বস্তুর উপরও প্রভাব ফেলবে, যখন প্রায়ই আপনি এটি করতে চান না।

আপনি যদি কেবল আপনার উপাদানটিকে স্বচ্ছ হতে চান তবে এটি আসলেই সহজ: 

background-color: transparent;

কিন্তু আপনি যদি এটি রংগুলিতে চান তবে আপনি এটি ব্যবহার করতে পারেন: 

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

অথবা ডান alpha দিয়ে সংরক্ষিত একটি ব্যাকগ্রাউন্ড চিত্র ( 1px দ্বারা 1px ) সংজ্ঞায়িত করুন।
(এটি করার জন্য, Gimp , Paint.Net বা অন্য কোনও চিত্র সফ্টওয়্যার ব্যবহার করুন যা আপনাকে এটি করার অনুমতি দেয়।
শুধু একটি নতুন চিত্র তৈরি করুন, পটভূমিটি মুছুন এবং এতে একটি আধা স্বচ্ছ রঙ রাখুন, তারপর এটি PNG এ সংরক্ষণ করুন।)

René যেমন বলা হয়েছে, ব্রাউজার যদি আলফা সমর্থন না করে তবে প্রথমটি rgba এবং 1px দ্বারা 1px ইমেজ উভয়টি মেশানো হবে: 

background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);

আরও দেখুন : http://www.w3schools.com/cssref/css_colors_legal.asp ।

ডেমো : আমার জেএসফিল্ড




tag   css   html   background-color   transparent  


transparent