স্বচ্ছ CSS ব্যাকগ্রাউন্ডের রঙ

Question

আমি ফন্টকে প্রভাবিত না করে অস্বচ্ছতা ব্যবহার করে তালিকার মেনুটির পটভূমি অদৃশ্য করতে চাই। এটি CSS3 দিয়ে কি সম্ভব?

Comments

হ্যা অবশ্যই! : আপনি এই কৌতুক দ্বারা এটা করতে পারেন stackoverflow.com/a/15351192/366884 সৌভাগ্য কামনা করছি

— সৌদ Alfadhli

Answer 1

এখন আপনি এই জাতীয় CSS বৈশিষ্ট্যে rgba ব্যবহার করতে পারেন :

.class {
    background: rgba(0,0,0,0.5);
}

0.5 হ'ল স্বচ্ছতা , আপনার নকশা অনুযায়ী মান পরিবর্তন করুন।

লাইভ ডেমো http://jsfiddle.net/EeAaB/

আরও তথ্য http://css-tricks.com/rgba-browser-support/

Comments

ধন্যবাদ. তবে আমি ফন্টকে প্রভাবিত না করে তালিকার মেনুতে ডিফল্ট তীর চিহ্নটি ডায়াপার করতে চাই

— সরণ্য

এই খাটো লেখার মতো উপায় আছে rgba('black', 0.5)?

— ফিল্ড 294

Answer 2

এই তিনটি বিকল্প মাথায় রাখুন (আপনি # 3 চান):

1) পুরো উপাদান স্বচ্ছ:

visibility: hidden;

2) পুরো উপাদানটি কিছুটা স্বচ্ছ:

opacity: 0.0 - 1.0;

3) উপাদানটির পটভূমিটি স্বচ্ছ:

background-color: transparent;

Answer 3

হ্যাঁ, সম্ভব। আপনার পটভূমির রঙের জন্য কেবল আরজিবা-সিনট্যাক্স ব্যবহার করুন।

.menue{
  background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
}

Comments

ওহে! অ্যাপ্লা চ্যানেলের সাথে আপনি 'ব্যাকগ্রাউন্ড-কালার' সিএসএস সংজ্ঞা সম্পর্কে কিছু জানেন, তবে রঙের জন্য # হাইএক্স মান ব্যবহার করে?

— পাইওটার স্টেপনিউস্কি

@ পাইট্রস্টেপনিউস্কি সম্ভবত দেরি হয়ে গেছে, কিন্তু এখন এমন একটি বাক্য গঠন আছে ( আমার উত্তর দেখুন )

— এফজেডস

Answer 4

সিএসএস নামের রঙ ব্যবহার করে এখানে একটি উদাহরণ বর্গ দেওয়া হয়েছে:

.semi-transparent {
  background: yellow;
  opacity: 0.25;
}

এটি এমন একটি পটভূমি যুক্ত করে যা 25% অস্বচ্ছ (রঙিন) এবং 75% স্বচ্ছ।

সতর্কীকরণ দুর্ভাগ্যবশত, অস্বচ্ছতা তারপর প্রভাবিত করবে সমগ্র উপাদান থেকে সংযুক্ত হয়।
সুতরাং যদি আপনার কাছে সেই উপাদানটিতে পাঠ্য থাকে তবে এটি পাঠ্যটিকে 25% অস্বচ্ছতাতে সেট করে। :-(

এর অতীত হওয়ার উপায়টি হল আপনার পছন্দসই পটভূমির "রঙ" এর অংশ হিসাবে স্বচ্ছতা নির্দেশ করার জন্য rgbaবা hslaপদ্ধতিগুলি ব্যবহার করা । এটি আপনাকে আপনার উপাদানগুলির অন্যান্য আইটেমগুলির স্বচ্ছতা থেকে পৃথক করে ব্যাকগ্রাউন্ড স্বচ্ছতা নির্দিষ্ট করতে দেয়।

অন্যান্য উপাদানকে প্রভাবিত না করে 75% স্বচ্ছতার ভিত্তিতে নীল পটভূমি সেট করার 3 উপায় এখানে রয়েছে:

• background: rgba(0%, 0%, 100%, 0.75)
• background: rgba(0, 0, 255, 0.75)
• background: hsla(240, 100%, 50%, 0.75)

Answer 5

এই ক্ষেত্রে background-color:rgba(0,0,0,0.5);সেরা উপায়। উদাহরণ স্বরূপ:background-color:rgba(0,0,0,opacity option);

Answer 6

এটি অর্জন করতে, আপনাকে background-colorউপাদানটির পরিবর্তন করতে হবে ।

একটি (আধা) স্বচ্ছ রঙ তৈরি করার উপায়:

• সিএসএস রঙের নামটি transparentসম্পূর্ণ স্বচ্ছ রঙ তৈরি করে।

  ব্যবহার:

    .transparent{
      background-color: transparent;
    }
  

• ব্যবহার rgbaবা hslaরঙ ফাংশন, যা আপনাকে rgbএবং hslফাংশনে আলফা চ্যানেল (অস্বচ্ছতা) যুক্ত করতে দেয় । তাদের আলফা মানগুলি 0 - 1 থেকে শুরু করে।

  ব্যবহার:

    .semi-transparent-yellow{
      background-color: rgba(255, 255, 0, 0.5);
    }
    .transparent{
      background-color:  hsla(0, 0%, 0%, 0);
    }
  

• ইতিমধ্যে উল্লিখিত সমাধানগুলি ছাড়াও, আপনি আলফা মান ( #RRGGBBAAবা #RGBAস্বরলিপি ) সহ এইচএক্স ফর্ম্যাটটিও ব্যবহার করতে পারেন ।

  এটি বেশ নতুন (সিএসএস কালার মডিউল স্তর 4 দ্বারা অন্তর্ভুক্ত), তবে ইতিমধ্যে বৃহত্তর ব্রাউজারগুলিতে প্রয়োগ করা হয়েছে (দুঃখিত, কোনও আইই নয়)।

  এটি অন্যান্য সমাধানগুলির থেকে পৃথক, কারণ এটি আলফা চ্যানেলটিকে (ধোঁকামি) হেক্সাডেসিমাল মান হিসাবেও বিবেচনা করে, এটি 0 - 255 ( FF) থেকে বিস্তৃত করে ।

  ব্যবহার:

    .semi-transparent-yellow{
      background-color: #FFFF0080;
    }
    .transparent{
      background-color: #0000;
    }
  

আপনি এগুলিও চেষ্টা করে দেখতে পারেন:

• transparent:

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: transparent;
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `transparent`
</div>

• rgba():

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: rgba(0, 255, 0, 0.3);
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `rgba()`
</div>

• #RRGGBBAA:

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: #FF000060
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `#RRGGBBAA`
</div>

Answer 7

এটা চেষ্টা কর:

opacity:0;

আইই 8 এবং এর আগের জন্য

filter:Alpha(opacity=0); 

ডাব্লু 3 স্কুল থেকে অস্বচ্ছতা ডেমো

Comments

আপনি যে সাইটের সাথে সংযোগ দিচ্ছেন ... এটি ভয়ানক।

— জন ডিভোরাক

@ দ্য ওয়ান্ডারার পৃষ্ঠাটি লিঙ্ক হওয়ার সাথে সাথেই শুরু করব। মনে রাখবেন এটি অনুকরণীয় কোড প্রদর্শন করার কথা। এবং এখনও ... কোন ইন্ডেন্টেশন নেই। মনে রাখবেন যে তারা এইচটিএমএল 5 ডক্টাইপ ব্যবহার করেন, যার অর্থ তারা এখানে লিঙ্কযুক্ত হওয়ার পরে পৃষ্ঠাটি আপডেট করেছিলেন, অথবা এটি প্রার্থীর সুপারিশ অবস্থায় থাকার অর্ধ বছর আগে তারা HTML5 ব্যবহার করেছিলেন। পরবর্তী: ইনলাইন সিএসএস খারাপ, ক্যাশিংয়ের জন্য এবং পঠনযোগ্যতার জন্য। তাদের এটিকে এখানে ব্যবহার করতে হবে কারণ পুরো পৃষ্ঠার উত্সের জন্য তাদের কাছে কেবল একটি প্যানেল রয়েছে, তবে তারা যদি একাধিক প্যানেল ব্যবহার করে, যেমন jsfiddle (2010) করে। এমনকি কোনও পৃষ্ঠার জন্যও অস্বচ্ছতা প্রদর্শন করে

— জন ডিভোরাক

@ দ্য ওয়ান্ডারার তারা আরও ভাল করতে পারত। নেস্টেড উপাদানগুলির উপর প্রভাব প্রদর্শন করে বা একটি হোভার অ্যাকশনটিকে এটি অক্ষম করার অনুমতি দিয়ে one তারপরে পুরোটা "ডাব্লু 3 কনসোরিয়াম হওয়ার ভান করে, এবং যখন আপনি খুঁজে পেয়েছেন যে আরও একটি রজন বা দু'টি লঞ্চ করে ডাব্লু 3সোমথিং লেবেলযুক্ত" জিনিস - আপনি আমাকে জিজ্ঞাসা করেন তবে বেআইনী। তারা আরও বলেছে যে তাদের উদাহরণগুলি "পঠনযোগ্যতার জন্য সহজীকরণ" এবং "ক্রমাগত পর্যালোচনা করা" হতে পারে তবে সাদা স্থান সরিয়ে ফেলা পাঠযোগ্যতা লাভ করে না এবং আই 7 সমর্থনটি ঠিক নতুন প্রবণতা নয়। এছাড়াও, কে এক টুকরো কাগজের জন্য $ 100 প্রদান করবে না যা তাদের বিশ্বাসযোগ্যতাতে আঘাত করে?

— জন ডিভোরাক

@ দ্য ওয়ান্ডারার আইআইআরসি, তাদের পরীক্ষার পূর্বরূপ ছিল। প্রশ্নগুলি ছিল ট্রিভিয়া এবং প্রবেশ-স্তর স্টাফের মিশ্রণ। তাদের উত্তরগুলির কিছু হালকা ভুলও থাকতে পারে। তাদের সিএসএস টিউটোরিয়ালের অস্বচ্ছ অংশ হিসাবে: চিত্রগুলি স্বচ্ছ করতে উত্সর্গীকৃত তিনটি শিরোনাম - তারা কেবল সিএসএস নির্বাচককে পরিবর্তন করে। তারপরে আর দুটি অনুচ্ছেদ - একটি আরজিবিএ (অবশেষে কেবল পটভূমি স্বচ্ছ) প্রবর্তন এবং একটি "ইন্টিগ্রেশন উদাহরণ" হিসাবে (ইয়াহে! এছাড়াও, কোনও প্রবর্তন) নয়। তারপরে ... এটাই। অস্বচ্ছতা সম্পর্কে আর কিছুই নেই। এবং না, পরে কোনও "অ্যাডভান্সড ধূলিকণা" নেই।

— জন ডিভোরাক

@ দ্য ওয়ান্ডারার আসুন জাভাস্ক্রিপ্ট সম্পর্কে কথা বলুন: তাদের সমস্ত উদাহরণের মধ্যে রয়েছে: কোনও ইনডেন্টেশন (এমনকি জাভাস্ক্রিপ্ট কোডেও); innerHTML =(আরে, কমপক্ষে এটি সতর্কতাগুলির চেয়ে ভাল এবং document.writeতারা 2012-এও করত, তবে এখনও jQuery টিউটোরিয়ালের বাইরে কোনও ডোম হেরফের নেই, যেখানে তারা প্রতিটি অধ্যায়ে প্রাসঙ্গিক পদ্ধতিগুলির তালিকাবদ্ধ করে, এবং তারপরেও এটি কেবল সেলেশন - এবং হ্যাঁ, তারা তালিকা তৈরি করে document.write)। তাদের এক্সএইচআর টিউটোরিয়ালটি অন্লোডের পরিবর্তে রেডিস্টেটচেনজ ব্যবহার করে (আইআই 7 সাল থেকে সমর্থিত)। ওএস এবং জেএসনে ফাংশনের জন্য তাদের কাজ? তাদের পরে আরও স্পষ্ট করে দেওয়ার জন্য স্ট্রিংফাই করুন

— জন ডিভোরাক

Answer 8

হ্যাঁ আপনি কেবল সরল পাঠ্য হিসাবে

.someDive{
    background:transparent 
}