আইই 8 তে থাকা উপাদানকে প্রভাবিত না করে ডিভের পটভূমির অস্বচ্ছতা?

Question

আমি ৮. এর অন্তর্ভুক্ত উপাদানটি প্রভাবিত না করে ডিভের পটভূমির অস্পষ্টতা সেট করতে চাই a. এর কোনও সমাধান আছে এবং 1 এক্স 1 .png চিত্রটি সেট করার কোনও উত্তর নেই এবং সেই চিত্রটির অস্বচ্ছতা সেট করুন কারণ আমি গতিশীল অস্বচ্ছতা ব্যবহার করছি এবং রঙ প্রশাসক পরিবর্তন করতে পারে যে

আমি এটি ব্যবহার করেছি তবে আইই 8 তে কাজ করছি না

#alpha {
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}

এবং

rgba(0,0,0,0.3)

এছাড়াও।

Comments

আপনি এটি করতে পারবেন না। সম্পত্তি অস্বচ্ছতা আপনার উপাদান (অন্যান্য এইচটিএমএল উপাদানসমূহ + পাঠ্য) এর সমস্ত সামগ্রীকে প্রভাবিত করে। আপনি কেন পিএনজি চান না তা আমি বুঝতে পারি না। আপনাকে কেবল একসাথে চিত্র পরিবর্তন করতে হবে আপনি সিএসএস পরিবর্তন করবেন (কারণ আমি মনে করি, আপনার কাছে আলাদা আলাদা CSS রয়েছে যা প্রশাসক বদলে যেতে পারেন)

— এলারফিন

@ করম: আপনি কতটা ভুল (আমি যেমন ছিলাম ততই) এটা সম্ভব. এই ব্লগ পোস্ট চেক আউট। robertnyman.com/2010/01/11/… অবিশ্বাস্যভাবে চালাক।

— রবার্ট কোরিটনিক

সবেমাত্র এখানে পোস্ট করা হয়েছে: < স্ট্যাকওভারফ্লো.com/a/11755175/1491212 > এটি আশা করি সহায়তা করতে পারে!

— আর্মেল লার্শিয়ার

Answer 1

opacityশৈলী পুরো উপাদান এবং সবকিছু এটি মধ্যে প্রভাবিত করে। এর সঠিক উত্তরটি হ'ল পরিবর্তে একটি rgba পটভূমি রঙ ব্যবহার করা।

সিএসএস মোটামুটি সহজ:

.myelement {
    background: rgba(200, 54, 54, 0.5);
}

... যেখানে প্রথম তিনটি সংখ্যা হ'ল আপনার পটভূমির রঙের জন্য লাল, সবুজ এবং নীল মান এবং চতুর্থটি হল 'আলফা' চ্যানেল মান, যা opacityমানের মতো একইভাবে কাজ করে ।

আরও তথ্যের জন্য এই পৃষ্ঠাটি দেখুন: http://css-tricks.com/rgba-browser-support/

ডাউন-সাইডটি হ'ল এটি আই 8 বা তার চেয়ে কম ক্ষেত্রে কাজ করে না। উপরে লিঙ্ক করা পৃষ্ঠাটিতে আরও কয়েকটি ব্রাউজারের তালিকা রয়েছে যা এটি কাজ করে না, তবে সেগুলি এখনই খুব পুরানো; আইই / / / / ৮ ব্যতীত বর্তমান ব্যবহারের সমস্ত ব্রাউজার আরগবা রঙের সাথে কাজ করবে।

সুসংবাদটি হ'ল আপনি সিএসএস 3পি নামে একটি হ্যাক ব্যবহার করে আইই কেও এটির সাথে কাজ করতে বাধ্য করতে পারেন । CSS3Pie, rgba ব্যাকগ্রাউন্ড কালার সহ, IE এর পুরানো সংস্করণগুলিতে বেশ কয়েকটি আধুনিক CSS3 বৈশিষ্ট্য যুক্ত করে।

ব্যাকগ্রাউন্ডের জন্য CSS3Pie ব্যবহার করতে, -pie-backgroundআপনার সিএসএসের পাশাপাশি পিআইই behaviorশৈলীতে একটি নির্দিষ্ট ঘোষণা যুক্ত করতে হবে, যাতে আপনার স্টাইলশীটটি দেখতে এমন হবে:

.myelement {
    background: rgba(200, 54, 54, 0.5);
    -pie-background:  rgba(200, 54, 54, 0.5);
    behavior: url(PIE.htc);
}

আশা করি এইটি কাজ করবে.

[Edit]

এটি যেমন মূল্যবান, তেমনি অন্যেরা উল্লেখ করেছেন, আপনি কীওয়ার্ড filterসহ আইই এর স্টাইলটি ব্যবহার করতে পারেন gradient। CSS3Pie সমাধান আসলে এই একই কৌশলটি পর্দার আড়ালে ব্যবহার করে তবে আপনার সরাসরি IE এর ফিল্টারগুলির সাথে জগাখিচির প্রয়োজনটি সরিয়ে দেয়, তাই আপনার স্টাইলশীটগুলি অনেক পরিষ্কার। (এটি অন্যান্য দুর্দান্ত বৈশিষ্ট্যগুলির পুরো গুচ্ছটিও যুক্ত করে, তবে এটি এই আলোচনার সাথে প্রাসঙ্গিক নয়)

Comments

উজ্জ্বল! এটি আমাকে অনেক সাহায্য করেছিল।

— জর্ডান স্টার্ক

Answer 2

এটি কেবল আপনার কাছে দেওয়া সহজ

background: rgba(0,0,0,0.3)

& IE এর জন্য এই ফিল্টারটি ব্যবহার করুন

background: transparent;
zoom: 1;    
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); /* IE 6 & 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; /* IE8 */

আপনি এখানে থেকে আপনার আরজিবিএ ফিল্টার তৈরি করতে পারেন http://kimili.com/j Journal/rgba-hsla-css-generator- for-internet-explorer/

Comments

অস্বচ্ছতার সাথে গ্রেডিয়েন্টগুলি কী করতে পারে? : এস

— রবার্ট করিতনিক

-: @Robert Koritnik এই উত্তরটি আমার সংস্করণ একটি ভাল ব্যাখ্যা জন্য দেখুন stackoverflow.com/questions/5160419/... : এখানে stackoverflow.com/questions/4788564/...

— thirtydot

@ আরবার্ট, এটি একমাত্র আইই ফিল্টার যা ওয়েবে উপলব্ধ এটি আরজিবা যেমন দিয়েছে তেমন প্রভাব দিয়েছে এবং আমি ফিল্টার বিশেষজ্ঞ নই।

— সন্দীপ

@ রবার্ট এটি ঠিক কাজ করে;) এই লিঙ্কটি দেখুন - @ সন্দীপ আমি প্রয়োজনীয় উপাদানগুলি (স্বচ্ছ পটভূমি এবং হ'লআউট) যুক্ত করতে, ফিল্টার ক্রম পরিবর্তন করতে ফিল্টার কোডটি ঠিক করেছি .. আপনি যদি রাজি না হন তবে নির্দ্বিধায় বোধ করবেন;)

— ক্লায়ারসুজি

@ সন্দীপ ফিল্টারগুলি লেআউট ব্যতীত কাজ করবে না, আপনার কোডে আপনার আরেকটি হ'লআউট সম্পত্তি থাকতে পারে, প্রস্থ হতে পারে? আমি এক হাতে কাজ করছি .. আমার কব্জিটি ব্রোক করুন সুতরাং আমার ধীর জবাবগুলি দেখুন, তবে দুটি পদ্ধতির তুলনার জন্য শর্তাধীন মন্তব্যে প্রাসঙ্গিক আই কোড সহ jsfiddle এখানে রয়েছে

— ক্লায়ারসুজি

Answer 3

opacity প্যারেন্ট উপাদান এটিকে পুরো সাব ডোম গাছের জন্য সেট করে

আপনি সত্যিকারের নির্দিষ্ট উপাদানের জন্য অস্বচ্ছতা সেট করতে পারবেন না যা বংশধরদেরও ত্যাগ করবে না। সিএসএস কীভাবে opacityকাজ করে তা আমি ভয় করি না।

আপনি যা করতে পারেন তা হ'ল একটি পাত্রে দুটি সহোদর উপাদান রয়েছে এবং স্বচ্ছ অবস্থান নির্ধারণ করতে পারেন:

<div id="container">
    <div id="transparent"></div>
    <div id="content"></div>
</div>

তারপরে আপনাকে স্বচ্ছ সেট position: absolute/relativeকরতে হবে যাতে এর সামগ্রীতে ভাইবোনটি এতে রেন্ডার হয়ে যায়।

rgba রঙিন পটভূমির ব্যাকগ্রাউন্ড স্বচ্ছতা করতে পারে

rgbaএলিমেন্টের ইচ্ছায় রঙ সেটিং background-colorঅবশ্যই কাজ করে তবে এটি আপনাকে ব্যাকগ্রাউন্ড হিসাবে কেবল রঙ ব্যবহার করতে সীমাবদ্ধ করবে। কোন চিত্র আমি ভীত। আপনি অবশ্যই CSS3 গ্রেডিয়েন্ট ব্যবহার করতে পারেন যদিও আপনি যদি গ্রেডিয়েন্ট স্টপ রঙগুলি সরবরাহ করেন rgba। যে পাশাপাশি কাজ করে।

তবে পরামর্শ দিন যা rgbaআপনার প্রয়োজনীয় ব্রাউজারগুলির দ্বারা সমর্থিত নাও হতে পারে।

সতর্কতা-মুক্ত মডেল ডায়ালগ কার্যকারিতা

তবে আপনি যদি পুরো পৃষ্ঠাকে একরকম মুখোশ দেওয়ার পরে থাকেন তবে সাধারণত divএই শৈলীর সেটটির সাথে একটি পৃথক যুক্ত করে এটি করা হয় :

position: fixed;
width: 100%;
height: 100%;
z-index: 1000; /* some high enough value so it will render on top */
opacity: .5;
filter: alpha(opacity=50);

তারপরে আপনি যখন সামগ্রীটি প্রদর্শন করবেন তখন এটির উচ্চতর হওয়া উচিত z-index। তবে এই দুটি উপাদান ভাইবোন বা কোনও কিছুর ক্ষেত্রে সম্পর্কিত নয়। এগুলি যেমন হওয়া উচিত তেমন প্রদর্শিত হয়। একের ওপরে

Comments

এটি সঠিক উত্তর, এমনকি বিজি-চিত্রগুলির সাথেও কাজ করছে

— বোটিয়া ফ্লোরিন ২

Answer 4

অন্তর্ভুক্ত উপাদানটির উপরে জেড-সূচকটি আরও সেট করার চেষ্টা করুন।

Answer 5

এই পদ্ধতির সম্পর্কে কী:

	<head>
	<style type="text/css">
		div.gradient {
			color: #000000;
			width: 800px;
			height: 200px;
		}
		div.gradient:after {
			background: url(SOME_BACKGROUND);
			background-size: cover;
			content:'';
			position:absolute;
			top:0;
			left:0;
			width:inherit;
			height:inherit;
			opacity:0.1;
		}
	</style>
	</head>
	<body>
		<div class="gradient">Text</div>
	</body>

Answer 6

সম্ভবত আরও সহজ উত্তর আছে, কোডটিতে আপনার পছন্দ মত যে কোনও ব্যাকগ্রাউন্ড রঙ যুক্ত করার চেষ্টা করুন, ব্যাকগ্রাউন্ড-রঙের মতো: # ff;

#alpha {
 background-color: #fff;
 opacity: 0.8;
 filter: alpha(opacity=80);
}

Comments

এটি সামগ্রীটিতেও প্রভাব ফেলছে!

— জেরমা ভিনসমোকে

Answer 7

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

Answer 8

আরজিবিএ ব্যবহার করুন বা যদি আপনি হেক্স কোড করেন তবে এটিকে আরজিবিএতে পরিবর্তন করুন। কিছু প্রেসু উপাদান সিএসএস করার দরকার নেই do

function hexaChangeRGB(hex, alpha) {
    var r = parseInt(hex.slice(1, 3), 16),
        g = parseInt(hex.slice(3, 5), 16),
        b = parseInt(hex.slice(5, 7), 16);

    if (alpha) {
        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
    } else {
        return "rgb(" + r + ", " + g + ", " + b + ")";
    }
}

hexaChangeRGB('#FF0000', 0.2);

সিএসএস ---------

background-color: #fff;
opacity: 0.8;

অথবা

mycolor = hexaChangeRGB('#FF0000', 0.2);
document.getElementById("myP").style.background-color = mycolor;