আমি সিএসএসে পিতা-মাতার কাছ থেকে সন্তানের অস্বচ্ছতার উত্তরাধিকারী হতে চাই না।
আমার একটি ডিভ আছে যা পিতামাতা, এবং আমার প্রথম ডিভের ভিতরে আরেকটি ডিভ রয়েছে যা শিশু।
আমি প্যারেন্ট ডিভের মধ্যে অস্বচ্ছ সম্পত্তিটি সেট করতে চাই, তবে আমি চাই না যে শিশু ডিভের অস্বচ্ছ সম্পত্তিটি উত্তরাধিকার সূত্রে প্রাপ্ত হোক।
আমি এটা কিভাবে করবো?
উত্তর:
অস্বচ্ছতা ব্যবহারের পরিবর্তে, আরজিবিএর সাথে একটি পটভূমি রঙ সেট করুন, যেখানে 'এ' স্বচ্ছতার স্তর।
এর পরিবর্তে:
background-color: rgb(0,0,255); opacity: 0.5;ব্যবহার
background-color: rgba(0,0,255,0.5);.png:)
অস্পষ্টতা আসলে CSS এ উত্তরাধিকারসূত্রে পাওয়া যায় না। এটি পোস্ট-রেন্ডারিং গোষ্ঠী রূপান্তর। অন্য কথায়, যদি কোনও <div>অস্বচ্ছতা সেট করে থাকে তবে আপনি ডিভ এবং তার সমস্ত বাচ্চাকে একটি অস্থায়ী বাফারে রেন্ডার করুন এবং তারপরে প্রদত্ত অস্বচ্ছতা সেটিংসের সাহায্যে সেই পুরো বাফারটিকে পৃষ্ঠায় মিশ্রিত করুন।
আপনি এখানে যা করতে চান তা নির্ভর করে আপনি যে সঠিক রেন্ডারিংটি খুঁজছেন তার উপর নির্ভর করে যা প্রশ্ন থেকে পরিষ্কার নয়।
opacity: .7;উপর div#containerপ্রত্যেক সন্তানের উপাদান তোলে - থেকে ul/ liথেকে imgথেকে p- একই অস্বচ্ছতা আছে। এটি অবশ্যই উত্তরাধিকারসূত্রে প্রাপ্ত।
opacity: 0.7উত্তরাধিকার কেমন হবে তা দেখার জন্য সমস্ত বংশধরকে প্রকৃতপক্ষে সেট করার চেষ্টা করুন । যেমনটি আমি বলেছিলাম, পরিবর্তে যা ঘটে তা হ'ল ধর্ষণটি উত্তরাধিকার সূত্রে পরিবর্তিত হয়ে পুরো ইউনিট এবং তার সমস্ত বংশধরকে একক হিসাবে প্রয়োগ করা হয়।
অন্যরা যেমন এবং অন্যান্য অনুরূপ থ্রেডে উল্লেখ করেছেন, এই সমস্যাটি এড়ানোর সর্বোত্তম উপায় হ'ল আরজিবিএ / এইচএসএলএ ব্যবহার করা বা অন্যথায় স্বচ্ছ পিএনজি ব্যবহার করা।
তবে, আপনি যদি এই থ্রেডের অন্য উত্তরের সাথে লিঙ্কিত অনুরূপ একটি হাস্যকর সমাধান চান (এটি আমার ওয়েবসাইটও), তবে আমি এখানে একটি নতুন স্ক্রিপ্ট লিখেছি যা ThatsNotYoChild.js নামে এই সমস্যাটি স্বয়ংক্রিয়ভাবে সমাধান করে:
http://www.impressivewebs.com/fixing-parent-child-opacity/
মূলত এটি জাভাস্ক্রিপ্ট ব্যবহার করে সমস্ত বাচ্চাকে পিতামাতার ডিভ থেকে সরিয়ে ফেলার জন্য, তারপরে শিশু উপাদানগুলিকে এমন জায়গায় প্রতিস্থাপন করুন যেখানে তারা সেই উপাদানটির আর আসলে শিশু না হয়ে থাকতে হবে।
আমার কাছে, এটি একটি শেষ অবলম্বন হওয়া উচিত, তবে আমি ভেবেছিলাম যে কেউ এই কাজটি করতে চায় তবে এটি এমন কিছু লিখতে মজা পাবে।
আপনার পিতা-মাতা স্বচ্ছ হয় এবং আপনি যদি চান যে আপনার সন্তান একই হয় তবে একটি নির্দিষ্টভাবে সংজ্ঞায়িত করা (উদাহরণস্বরূপ একটি নির্বাচিত ড্রপডাউনর ব্যবহারকারী এজেন্ট শৈলীর ওভাররাইট করা):
.parent {
background-color: rgba(0,0,0,0.5);
}
.child {
background-color: rgba(128,128,128,0);
}সন্তানের উপাদানটির অস্বচ্ছতা পিতামণ্ডলীয় উপাদান থেকে উত্তরাধিকার সূত্রে প্রাপ্ত।
তবে আমরা আমাদের অর্জন সম্পাদন করতে CSS অবস্থানের সম্পত্তিটি ব্যবহার করতে পারি।
পাঠ্য ধারক ডিভটি পিতামাতার দ্বীপের বাইরে রাখা যেতে পারে তবে পরম অবস্থানের সাথে কাঙ্ক্ষিত প্রভাবটি প্রজেক্ট করা যায়।
আদর্শ প্রয়োজনীয়তা ------------------ >>>>>>>>>>>>
এইচটিএমএল
<div class="container">
<div class="bar">
<div class="text">The text opacity is inherited from the parent div </div>
</div>
</div>সিএসএস
.container{
position:relative;
}
.bar{
opacity:0.2;
background-color:#000;
z-index:3;
position:absolute;
top:0;
left:0;
}
.text{
color:#fff;
}আউটপুট: -
পাঠ্যটি দৃশ্যমান নয় কারণ পিতামহ বিভাজন থেকে অস্পষ্টতার উত্তরাধিকার সূত্রে প্রাপ্ত।
সমাধান ------------------- >>>>>>
এইচটিএমএল
<div class="container">
<div class="text">Opacity is not inherited from parent div "bar"</div>
<div class="bar"></div>
</div>সিএসএস
.container{
position:relative;
}
.bar{
opacity:0.2;
background-color:#000;
z-index:3;
position:absolute;
top:0;
left:0;
}
.text{
color:#fff;
z-index:3;
position:absolute;
top:0;
left:0;
}আউটপুট:
পাঠ্যটি একই রঙের সাথে পটভূমির মতো দৃশ্যমান কারণ ডিভ স্বচ্ছ ডিভের মধ্যে নেই
ব্যাকগ্রাউন্ডটি কোনও রঙ বা কোনও চিত্র হিসাবে প্রশ্নটি সংজ্ঞায়িত করা হয়নি তবে যেহেতু @ ব্লাস্কি ইতিমধ্যে রঙিন ব্যাকগ্রাউন্ডের জন্য উত্তর দিয়েছেন, নীচের চিত্রগুলির জন্য একটি হ্যাক রয়েছে:
background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('image.jpg');এইভাবে আপনি আপনার অস্বচ্ছতার রঙ ম্যানিপুলেট করতে পারেন এবং এমনকি গ্রেডিয়েন্ট প্রভাবগুলি যুক্ত করতে পারেন।
.wrapper {
width: 630px;
height: 420px;
display: table;
background: linear-gradient(
rgba(0,0,0,.8),
rgba(0,0,0,.8)),
url('http://cdn.moviestillsdb.com/sm/35bc3c6a2b791425de6caf8b9391026e/rambo-iii.jpg');
}
h1 {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
}<div class="wrapper">
<h1>Question 5770341</h1>
</div>দেখে মনে হচ্ছে যে display: blockউপাদানগুলি display: inlineপিতামাতার থেকে অস্বচ্ছতার উত্তরাধিকারী নয় ।
কারণ এটি অবৈধ মার্কআপ এবং ব্রাউজারটি গোপনে সেগুলি আলাদা করছে? কারণ উত্সটি ঘটছে তা দেখায় না। আমি কিছু অনুপস্থিত করছি?
উপরের উত্তরগুলি আমার পক্ষে জটিল বলে মনে হচ্ছে, তাই আমি এটি লিখেছিলাম:
#kb-mask-overlay {
background-color: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
z-index: 10000;
top: 0;
left: 0;
position: fixed;
content: "";
}
#kb-mask-overlay > .pop-up {
width: 800px;
height: 150px;
background-color: dimgray;
margin-top: 30px;
margin-left: 30px;
}
span {
color: white;
}<div id="kb-mask-overlay">
<div class="pop-up">
<span>Content of no opacity children</span>
</div>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae arcu nec velit pharetra consequat a quis sem. Vestibulum rutrum, ligula nec aliquam suscipit, sem justo accumsan mauris, id iaculis mauris arcu a eros. Donec sem urna, posuere id felis eget, pharetra rhoncus felis. Mauris tellus metus, rhoncus et laoreet sed, dictum nec orci. Mauris sagittis et nisl vitae aliquet. Sed vestibulum at orci ut tempor. Ut tristique vel erat sed efficitur. Vivamus vestibulum velit condimentum tristique lacinia. Sed dignissim iaculis mattis. Sed eu ligula felis. Mauris diam augue, rhoncus sed interdum nec, euismod eget urna.
Morbi sem arcu, sollicitudin ut euismod ac, iaculis id dolor. Praesent ultricies eu massa eget varius. Nunc sit amet egestas arcu. Quisque at turpis lobortis nibh semper imperdiet vitae a neque. Proin maximus laoreet luctus. Nulla vel nulla ut elit blandit consequat. Nullam tempus purus vitae luctus fringilla. Nullam sodales vel justo vitae eleifend. Suspendisse et tortor nulla. Ut pharetra, sapien non porttitor pharetra, libero augue dictum purus, dignissim vehicula ligula nulla sed purus. Cras nec dapibus dolor. Donec nulla arcu, pretium ac ipsum vel, accumsan egestas urna. Vestibulum at bibendum tortor, a consequat eros. Nunc interdum at erat nec ultrices. Sed a augue sit amet lacus sodales eleifend ut id metus. Quisque vel luctus arcu.
</p>
</div>kb-mask-overlayএটি আপনার (অস্বচ্ছতা) পিতামাতা, pop-upএটি আপনার (কোনও অস্বচ্ছতা) নয়। এর নীচে সমস্ত কিছু আপনার সাইটের বাকি।
কোনও আকারের মতো নয় - সমস্ত পদ্ধতির, তবে একটি জিনিস যা আমি বিশেষভাবে সহায়ক বলে মনে করি তা হল কোনও ডিভের প্রত্যক্ষ বাচ্চাদের জন্য অস্বচ্ছতা নির্ধারণ করা, আপনি সম্পূর্ণরূপে দৃশ্যমান রাখতে চান এমন একটি বাদে। কোডে:
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
</div>এবং সিএসএস:
div.parent > div:not(.child1){
opacity: 0.5;
}অভিভাবকের উপরে আপনার পটভূমির রঙ / চিত্র থাকলে আপনি আলফা ফিল্টার প্রয়োগ করে আরজিবিএ এবং ব্যাকগ্রাউন্ড-চিত্রের সাথে রঙের অস্বচ্ছতাটি ঠিক করেন
আপনার যদি কোনও চিত্রকে স্বচ্ছ পটভূমি হিসাবে ব্যবহার করতে হয় তবে আপনি ছদ্ম উপাদানটি ব্যবহার করে এর চারপাশে কাজ করতে সক্ষম হতে পারেন:
এইচটিএমএল
<div class="wrap">
<p>I have 100% opacity</p>
</div>CSS
.wrap, .wrap > * {
position: relative;
}
.wrap:before {
content: " ";
opacity: 0.2;
background: url("http://placehold.it/100x100/FF0000") repeat;
position: absolute;
width: 100%;
height: 100%;
}আমার উত্তর স্থিতিশীল পিতা-সন্তানের বিন্যাস সম্পর্কে নয়, এটি অ্যানিমেশন সম্পর্কিত।
আমি আজ একটি এসজিজি ডেমো করছিলাম, এবং আমার ডিভের ভিতরে থাকতে এসজিগের প্রয়োজন ছিল (কারণ এসভিজি প্যারেন্টের দ্বি প্রস্থ এবং উচ্চতা দিয়ে তৈরি হয়েছিল, চারপাশের পথটি অ্যানিমেট করার জন্য), এবং এই প্যারেন্ট ডিভের এসভিজি পাথ অ্যানিমেশন চলাকালীন অদৃশ্য হওয়া দরকার (এবং তারপরে) এই ডিভের কথা ছিল animate opacity from 0 to 1, এটি সবচেয়ে গুরুত্বপূর্ণ অংশ)। এবং যেহেতু opacity: 0পিতামহী বিভাগটি আমার এসভিজি লুকিয়ে ছিল তাই আমি এই হ্যাকটি visibilityঅপশনটি নিয়ে এসেছি (যার visibility: visibleসাথে পিতামাতার অভ্যন্তরে দেখা যেতে পারে visibility: hidden):
.main.invisible .test {
visibility: hidden;
}
.main.opacity-zero .test {
opacity: 0;
transition: opacity 0s !important;
}
.test { // parent div
transition: opacity 1s;
}
.test-svg { // child svg
visibility: visible;
}এবং তারপরে, জেএসে, আপনি .invisibleটাইমআউট ফাংশন সহ ক্লাস সরিয়ে, ক্লাস যুক্ত করে .opacity-zero, ট্রিগার লেআউট জাতীয় কিছু দিয়ে ক্লাস whatever.style.top;এবং সরিয়ে .opacity-zeroফেলছেন।
var $main = $(".main");
setTimeout(function() {
$main.addClass('opacity-zero').removeClass("invisible");
$(".test-svg").hide();
$main.css("top");
$main.removeClass("opacity-zero");
}, 3000);এই ডেমোটি পরীক্ষা করা আরও ভাল c
ম্যাক-এ আপনি আপনার .png চিত্রটি নিজের .css এ রাখার আগে আপনার .png চিত্রের উপরে রাখা সাদা আয়তক্ষেত্রে অস্বচ্ছতা প্রয়োগ করতে প্রাকদর্শন সম্পাদক ব্যবহার করতে পারেন ।
1) ভাবমূর্তি
লোগো
2) প্রায় ছবিটি একটি আয়তক্ষেত্র তৈরি করুন
লোগোর চারপাশে Rectanle
3) সাদা পরিবর্তন করুন পটভূমির রঙ
আয়তক্ষেত্র সাদা পরিণত
4) আয়তক্ষেত্র অস্বচ্ছতা সামঞ্জস্যবিধান
অস্বচ্ছ ইমেজ
শিশুটিকে পুনরাবৃত্তভাবে ধাপে ধাপে ধাপে ধাপ দেত্তয়া 1 নির্ধারণ করুন:
div > div { opacity: 1.0 }উদাহরণ:
div.x { opacity: 0.5 }
div.x > div.x { opacity: 1.0 }<div style="background-color: #f00; padding:20px;">
<div style="background-color: #0f0; padding:20px;">
<div style="background-color: #00f; padding:20px;">
<div style="background-color: #000; padding:20px; color:#fff">
Example Text - No opacity definition
</div>
</div>
</div>
</div>
<div style="opacity:0.5; background-color: #f00; padding:20px;">
<div style="opacity:0.5; background-color: #0f0; padding:20px;">
<div style="opacity:0.5; background-color: #00f; padding:20px;">
<div style="opacity:0.5; background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity inherited
</div>
</div>
</div>
</div>
<div class="x" style="background-color: #f00; padding:20px;">
<div class="x" style="background-color: #0f0; padding:20px;">
<div class="x" style="background-color: #00f; padding:20px;">
<div class="x" style="background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity not inherited
</div>
</div>
</div>
</div>
<div style="opacity: 0.5; background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity
</div>অন্যান্য লোকদের জন্য একটি সারণী (বা কিছু) তৈরি করার চেষ্টা করার জন্য অস্বচ্ছতা ব্যবহার করে এক সারিতে দৃষ্টি নিবদ্ধ করা উচিত। @ ব্লোস্কি বলেছে রঙটি অস্বচ্ছ নয় use এই ঝাঁকুনিটি দেখুন: http://jsfiddle.net/2en6o43d/
.table:hover > .row:not(:hover)
opacitydisplay: noneএই অর্থে এ বিট মত ।