html - সিএসএস পটভূমি অস্পষ্টতা



css opacity (6)

আমি নিম্নলিখিত কোড অনুরূপ কিছু ব্যবহার করছি:

<div style="opacity:0.4; background-image:url(...);">
 <div style="opacity:1.0;">
  Text
 </div>
</div>

আমি এই ব্যাকগ্রাউন্ডটি 0.4 এর অস্পষ্টতা এবং 100% অস্পষ্টতা থাকার জন্য এটির প্রত্যাশিত। পরিবর্তে তাদের উভয় 0.4 একটি অস্বচ্ছতা আছে।

https://ffff65535.com


আপনি sass transparentize ব্যবহার করতে পারেন, আমি এটা সবচেয়ে দরকারী এবং ব্যবহারযোগ্য প্লেইন পাওয়া।

transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6) 

আরো দেখুন: http://sass-lang.com/documentation/Sass/Script/Functions.html#transparentize-instance_method


আপনি সিএসএস 3 ব্যবহার করতে পারেন :before একটি আধা স্বচ্ছ পটভূমি আছে :before এবং আপনি এটি শুধুমাত্র একটি ধারক সঙ্গে করতে পারেন। এই মত কিছু ব্যবহার করুন

<article>
  Text.
</article>

তারপর কিছু সিএসএস প্রয়োগ করুন

article {
  position: relative;
  z-index: 1;
}

article::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .4; 
  z-index: -1;
  background: url(path/to/your/image);
}

নমুনা: http://codepen.io/anon/pen/avdsi

দ্রষ্টব্য: আপনি z-index মান সামঞ্জস্য করতে হতে পারে।


কারণ অভ্যন্তরীণ div div divisions এর অস্বচ্ছতা 100% এটি nested (যা 40% অস্পষ্টতা আছে)।

এটি রোধ করার জন্য কয়েকটি জিনিস আপনি করতে পারেন।

আপনি তাই দুটি পৃথক divs তৈরি করতে পারে:

<div id="background"></div>
<div id="bContent"></div>

আপনার পছন্দসই CSS অপাসিটি এবং Hte পটভূমির জন্য অন্যান্য বৈশিষ্ট্যগুলি সেট করুন এবং শৈলীতে z-index সম্পত্তি ( z-index ) ব্যবহার করুন এবং bContent div অবস্থান করুন। এটির সাথে আপনি অস্পষ্টতার সাথে mucked ছাড়া ব্যাকগ্রাউন্ড ডিভ ডিভ divtops স্থাপন করতে পারেন।

আরেকটি বিকল্প RGBa । এটি আপনাকে আপনার divs ঘুমানোর অনুমতি দেয় এবং এখনও ডিভি নির্দিষ্ট অস্বচ্ছতা অর্জন।

শেষ বিকল্পটি আপনার পছন্দের চিত্র সম্পাদককে আপনার পছন্দসই রঙের আধা স্বচ্ছ .পিএনজি চিত্রটি তৈরি করা, চিত্রটির URL এ ব্যাকগ্রাউন্ড-চিত্র সম্পত্তি সেট করুন এবং তারপরে আপনাকে mucking সম্পর্কে চিন্তা করতে হবে না CSS এর সাথে এবং একটি নেস্টেড ডিভি গঠনটির ক্ষমতা এবং সংস্থান হারানো।


নিম্নলিখিত পদ্ধতিগুলি আপনার সমস্যার সমাধান করতে ব্যবহার করা যেতে পারে:

  1. সিএসএস আলফা স্বচ্ছতা পদ্ধতি (IE 8 তে কাজ করে না)

    #div{background-color:rgba(255,0,0,0.5);}
  2. পটভূমি হিসাবে আপনার পছন্দ অনুযায়ী একটি স্বচ্ছ PNG ইমেজ ব্যবহার করুন।

  3. একটি ক্রস-ব্রাউজার আলফা-স্বচ্ছ ব্যাকগ্রাউন্ড তৈরি করতে নিম্নলিখিত CSS কোড স্নিপেটটি ব্যবহার করুন। #000000 @ 0.4% অস্বচ্ছতার সাথে এখানে একটি উদাহরণ

    .div {  
        background:rgb(0,0,0);  
        background: transparent\9;  
        background:rgba(0,0,0,0.4);  
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);  
        zoom: 1;  
    }    
    .div:nth-child(n) {  
        filter: none;  
    }

এই কৌশল সম্পর্কে আরও বিস্তারিত জানার জন্য, এটি দেখুন, যা একটি অনলাইন CSS জেনারেটর রয়েছে।


শিশু অস্পষ্টতা উত্তরাধিকারী। তারা অদ্ভুত এবং অসুবিধাজনক হবে না যদি তারা না।

আপনি আপনার পটভূমির চিত্রের জন্য একটি আচ্ছাদিত PNG ব্যবহার করতে পারেন, বা আপনার পটভূমির রঙের জন্য একটি RGBa (একটি আলফা) রঙটি ব্যবহার করতে পারেন।

উদাহরণ, 50% কালো পটভূমি বিবর্ণ:

<div style="background-color:rgba(0, 0, 0, 0.5);">
   <div>
      Text added.
   </div>
</div>


.transbg{/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: 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)";}




opacity