উত্তর:
একটি পিএনজি তৈরি করুন যা 1x1 পিক্সেলের চেয়ে বড় (ধন্যবাদ থার্ডডট) এবং এটি আপনার পটভূমির স্বচ্ছতার সাথে মেলে।
সম্পাদনা করুন: আইই 6 + সমর্থনের পিছনে ফিরে আসার জন্য, আপনি পিএনজি-র জন্য বিকেজিডি অংশ উল্লেখ করতে পারেন, এটি এমন একটি রঙ যা এটি সমর্থন না করা হলে সত্য আলফা স্বচ্ছতা প্রতিস্থাপন করবে। আপনি গিম্প উদাহরণস্বরূপ এটি ঠিক করতে পারেন।
1x1: stackoverflow.com/questions/7764751/...
আইজি তে আরজিবিএ এবং এইচএসএলএর পটভূমি অনুকরণ করতে, আপনি একই সূচনা এবং শেষ রঙের সাথে গ্রেডিয়েন্ট ফিল্টার ব্যবহার করতে পারেন (আলফা চ্যানেলটি এইচএক্সের মান হিসাবে প্রথম জুটি)
background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */আমি বিশ্বাস করি এটি সর্বোত্তম কারণ এই পৃষ্ঠায় আলফা-স্বচ্ছ ব্যাকগ্রাউন্ড উত্পন্ন করতে আপনার একটি সহায়িকা রয়েছে:
" ক্রস ব্রাউজার আলফা স্বচ্ছ ব্যাকগ্রাউন্ড সিএসএস (আরজিবিএ) " (* এখন আর্কাইভ.অর্গের সাথে সংযুক্ত)
#div {
background:rgb(255,0,0);
background: transparent\9;
background:rgba(255,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000);
zoom: 1;
}স্বচ্ছ png চিত্রটি আইই 6-- তে কাজ করবে না, বিকল্পগুলি হ'ল:
সিএসএস সহ:
.transparent {
/* works for IE 5+. */
filter:alpha(opacity=30);
/* works for IE 8. */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
/* works for old school versions of the Mozilla browsers like Netscape Navigator. */
-moz-opacity:0.3;
/* This is for old versions of Safari (1.x) with KHTML rendering engine */
-khtml-opacity: 0.3;
/* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */
opacity: 0.3;
}বা কেবল এটি jQuery দিয়ে করুন:
// a crossbrowser solution
$(document).ready(function(){
$(".transparent").css('opacity','.3');
});যদিও দেরী, আমি যে আজ ব্যবহার করতে ছিল এবং খুব দরকারী পিএইচপি স্ক্রিপ্ট পাওয়া এখানে যে কত পথ rgba কাজ মতো, আপনি পরিবর্তনশীল একটি PNG ফাইল তৈরি করতে অনুমতি দেবে।
background: url(rgba.php?r=255&g=100&b=0&a=50) repeat;
background: rgba(255,100,0,0.5);স্ক্রিপ্টটি এখানে ডাউনলোড করা যেতে পারে: http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip
আমি জানি এটি সবার জন্য নিখুঁত সমাধান নাও হতে পারে তবে কিছু ক্ষেত্রে এটি বিবেচনা করার মতো, যেহেতু এটি অনেক সময় সাশ্রয় করে এবং নির্বিঘ্নে কাজ করে। আশা করি যে কাউকে সাহায্য করবে!
rgba? বা সবসময় সব ব্যবহারকারীদের দ্বারা অনুরোধ করা হয়, এবং সহজভাবে প্রদর্শিত হয় না?
সিএসএসে বেশিরভাগ ব্রাউজার সমর্থন আরজিবিএ কোড রয়েছে তবে কেবল আইই 8 এবং নীচে স্তরগুলি আরজিবিএস সিএস কোড সমর্থন করে না। এর জন্য এখানে সমাধান। সমাধানের জন্য আপনাকে অবশ্যই এই কোডটি অনুসরণ করতে হবে এবং এর ক্রমটি অনুসরণ করা ভাল better নইলে আপনি নিজের ইচ্ছানুযায়ী নিখুঁত আউটপুট পাবেন না। এই কোডটি আমার দ্বারা ব্যবহৃত হয় এবং এটি বেশিরভাগ ক্ষেত্রে নিখুঁত। এটি নিখুঁত হলে মন্তব্য করুন।
.class
{
/* Web browsers that does not support RGBa */
background: rgb(0, 0, 0);
/* IE9/FF/chrome/safari supported */
background: rgba(0, 0, 0, 0.6);
/* IE 8 suppoerted */
/* Here some time problem for Hover than you can use background color/image */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000)";
/* Below IE7 supported */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000);
}অস্বচ্ছতা পরিবর্তন করতে আপনি CSS ব্যবহার করেন। আইই সামাল দিতে আপনার এমন কিছু দরকার:
.opaque {
opacity : 0.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
}তবে এটির সাথে একমাত্র সমস্যাটি হ'ল এর অর্থ পাত্রে থাকা অভ্যন্তরের যে কোনও কিছুই হ'ল ০.২ অস্বচ্ছতাও বটে। সুতরাং আপনাকে আপনার এইচটিএমএলকে অন্য কন্টেইনারে পরিবর্তন করতে হবে, স্বচ্ছের অভ্যন্তরে নয়, এতে আপনার সামগ্রী রয়েছে।
অন্যথায় png কৌশল, কাজ করবে। আইআই for এর জন্য আপনার কোনও স্থির প্রয়োজন বাদে এটি নিজেই সমস্যার কারণ হতে পারে।
rgba()3 সংস্করণ 3 পর্যন্ত সমর্থন করে না, এবং অপেরা 10 সংস্করণ পর্যন্ত এটি সমর্থন করে না
আমি পার্টিতে দেরি করছি, তবে অন্য কারও কাছে যারা এটি খুঁজে পায় - এই নিবন্ধটি খুব দরকারী: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
এটি শক্ত তবে স্বচ্ছ রঙ প্রদর্শন করতে গ্রেডিয়েন্ট ফিল্টার ব্যবহার করে।
rgbaআইইতে পটভূমি ব্যবহার করার জন্য একটি ফ্যালব্যাক রয়েছে।
আমাদের ফিল্টার সম্পত্তি ব্যবহার করতে হবে। যে ব্যবহার করেARGB
background:none;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
zoom: 1;এই জন্য ফ্যালব্যাক rgba(255, 255, 255, 0.2)
#33ffffffআপনার অনুযায়ী পরিবর্তন করুন ।
ARGBকরা যায়RGBAএটি আপনাকে খুব সহজেই দিতে হবে আপনাকে প্রথমে আপনাকে আরজিবি হিসাবে ব্যাকগ্রাউন্ড দিতে হবে কারণ ইন্টারনেট এক্সপ্লোরার 8 এর পরিবর্তে আরজিবি আরজিবি সমর্থন করবে এবং তারপরে আপনাকে ধূলোব্যাধি দিতে হবে filter:alpha(opacity=50);
background:rgb(0,0,0);
filter:alpha(opacity=50);আই ই এক্স সহ বেশিরভাগ ব্রাউজারের জন্য এটি স্বচ্ছতার সমাধান
.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}সবচেয়ে ভালো সমাধান আমি এতদূর পাওয়া তার ডেভিড জে Marland দ্বারা প্রস্তাবিত এক ব্লগ , পুরাতন ব্রাউজার (আইই 6+) সমর্থন অস্বচ্ছতা করুন:
.alpha30{
background:rgb(255,0,0); /* Fallback for web browsers that don't support RGBa nor filter */
background: transparent\9; /* backslash 9 hack to prevent IE 8 from falling into the fallback */
background:rgba(255,0,0,0.3); /* RGBa declaration for browsers that support it */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000); /* needed for IE 6-8 */
zoom: 1; /* needed for IE 6-8 */
}
/*
* CSS3 selector (not supported by IE 6 to IE 8),
* to avoid IE more recent versions to apply opacity twice
* (once with rgba and once with filter)
*/
.alpha30:nth-child(n) {
filter: none;
}অনেকগুলি অনুসন্ধানের পরে, আমি নিম্নলিখিত সমাধানগুলি পেয়েছি যা আমার ক্ষেত্রে কাজ করছে:
.opacity_30{
background:rgb(255,255,255); /* Fallback for web browsers that don't support neither RGBa nor filter */
background: transparent\9; /* Backslash 9 hack to prevent IE 8 from falling into the fallback */
background:rgba(255,255,255,0.3); /* RGBa declaration for modern browsers */
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* IE 8 suppoerted; Sometimes Hover issues may occur, then we can use transparent repeating background image :( */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* needed for IE 6-7 */
zoom: 1; /* Hack needed for IE 6-8 */
}
/* To avoid IE more recent versions to apply opacity twice (once with rgba and once with filter), we need the following CSS3 selector hack (not supported by IE 6-8) */
.opacity_30:nth-child(n) {
filter: none;
}* গুরুত্বপূর্ণ: আরজিবিএ থেকে এআরজিবি (আইইএস এর জন্য) গণনা করতে, আমরা অনলাইন সরঞ্জামগুলি ব্যবহার করতে পারি:
rgba()আইই 8 তে রঙের মানগুলি সমর্থিত নয়