সিএসএস সহ ধূসর ছবিটি?

Question

সিএসএসের মাধ্যমে কোনও চিত্রকে "ধুসর" দেখানোর সর্বোত্তম উপায়টি (যদি কোনও হয়) তবে (চিত্রটির আলাদা, ধূসর রঙের সংস্করণটি লোড না করে) কী?

আমার প্রসঙ্গটি হ'ল আমার টেবিলে সারি রয়েছে যেগুলির ডানদিকে সবচেয়ে বেশি কক্ষে বোতাম রয়েছে এবং কিছু সারিগুলির অন্যদের তুলনায় হালকা দেখতে প্রয়োজন। সুতরাং আমি অবশ্যই ফন্টটি সহজেই হালকা করতে পারি তবে আমি প্রতিটি চিত্রের দুটি সংস্করণ পরিচালনা না করেই চিত্রগুলি হালকা করতে চাই।

Answer 1

এটি ধূসর হতে হবে? আপনি কেবল চিত্রটির অস্বচ্ছতাটি কম সেট করতে পারেন (এটি নিস্তেজ করতে)। বিকল্পভাবে, আপনি একটি <div>ওভারলে তৈরি করতে এবং ধূসর হতে সেট করতে পারেন (প্রভাব পেতে আলফা পরিবর্তন করুন)।

• এইচটিএমএল:

  <div id="wrapper">
      <img id="myImage" src="something.jpg" />
  </div>

• CSS:

  #myImage {
      opacity: 0.4;
      filter: alpha(opacity=40); /* msie */
  }
  
  /* or */
  
  #wrapper {
      opacity: 0.4;
      filter: alpha(opacity=40); /* msie */
      background-color: #000;
  }

Comments

ইন্টারনেট এক্সপ্লোরার ভাল। আপনি ফিল্টার বৈশিষ্ট্য সহ আরও কিছু করতে পারেন; যেমন এটি রেন্ডারিং করতে ডাইরেক্টড্র ব্যবহার করে। তবে, তবে এটি শুধুমাত্র IE- এ ব্যবহার করে

আমি jQuery ব্যবহার কি ছিল .. আমি $ ( "# imgid") filter.opacity = "0.3" করেনি।

— Avdhut বৈদ্য

Answer 2

CSS3 ফিল্টার সম্পত্তি ব্যবহার করুন:

img {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
         -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
            filter: grayscale(100%); 
}

ব্রাউজার সমর্থনটি একটু খারাপ তবে এটি 100% সিএসএস। CSS3 ফিল্টার সম্পত্তি সম্পর্কে একটি দুর্দান্ত নিবন্ধ যা আপনি এখানে পেতে পারেন: http://blog.nmsdvid.com/css-filter-property/

Comments

এটিকে আরও গা dark় করার জন্য, contrast(x%)সম্পত্তি যুক্ত করুন, যেমন grayscale(100%) contrast(30%)।

— ডেনিস গোলোমাজভ

ব্রাউজার সমর্থন একটি বাস্তব সমস্যা কারণ এটি স্পষ্টতই IE10, IE11, FF26, সাফারি 5.1.x (উইন 7 এক্স 64) বা Chrome এর বাইরের কোনও কিছুতে (উদাহরণস্বরূপ) কাজ করে না

— নিকব

এটি আপনাকে এটিকে হালকা ধূসরতে সেট করতে দেয় না, তবে যদি কোনও সাদা পটভূমিতে থাকে তবে আপনি এটিটি হয়ে ওঠার জন্য এটি অস্বচ্ছতার সাথে ব্যবহার করতে পারেন; img { filter: grayscale(100%); opacity: 0.4; }

— এজওয়ার্ড

Answer 3

তুমি এখানে:

<a href="#"><img src="img.jpg" /></a>

সিএসএস গ্রে:

img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}

Ungray:

a:hover img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: none ; /* IE6-9 */
    zoom:1; /* needed to trigger "hasLayout" in IE if no width or height is set */
    -webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    }

আমি এটি এখানে পেয়েছি: http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao

সম্পাদনা: আইই 10 + ডিএক্স ফিল্টারগুলিকে আইই 9 এবং তার আগের কাজগুলি সমর্থন করে না বা গ্রেস্কেল ফিল্টারটির পূর্বনির্ধারিত সংস্করণকে সমর্থন করে না। আপনি এটি ঠিক করতে পারেন, নীচে দুটি সমাধানের মধ্যে একটি ব্যবহার করুন:

1. মাথায় নিম্নলিখিত মেটা উপাদান ব্যবহার করে IE9 মান মোড ব্যবহার করে রেন্ডার করতে IE10 + সেট করুন: <meta http-equiv="X-UA-Compatible" content="IE=9">
2. গ্রেস্কেলিং ইন্টারনেট এক্সপ্লোরার 10 সম্পাদন করতে IE10 এ একটি এসভিজি ওভারলে ব্যবহার করুন - গ্রেস্কেল ফিল্টার প্রয়োগ করবেন কীভাবে?

Comments

ধন্যবাদ! এটিই একমাত্র উত্তর যা আমাকে ফায়ারফক্সে এটি কাজ করতে সহায়তা করেছিল!

— জেমি কার্ল

@ জ্যামি কার্ল: খুশি আমি সাহায্য করতে পারি। এই কোডটি সমস্ত ব্রাউজারে ভাল কাজ করে :)

— সাকাতা জিন্টোকি

ইউর্রে ইয়ারইয়েজার, জুম: ১? আমার ধারণা যে এটি একটি ভুল?

— প্যারা

Answer 4

আপনি যদি কিছুটা জাভাস্ক্রিপ্ট ব্যবহার করতে আপত্তি করেন না, jQuery এর ফেইডটো () চেষ্টা করেছি প্রতিটি ব্রাউজারে দুর্দান্ত কাজ করে।

jQuery(selector).fadeTo(speed, opacity);

Comments

আমার পুরাতন উত্তরটি জুড়ে আবার এখানে এসে পড়েছে। আমি এখন এর জন্য জেএস ব্যবহার করার উপায় নেই। খাঁটি সিএসএস অনেক ভাল।

— নাথান লং

Answer 5

সমস্ত ব্রাউজার সমর্থন করা ভাল:

img.lessOpacity {               
   opacity: 0.4;
   filter: alpha(opacity=40);
   zoom: 1;  /* needed to trigger "hasLayout" in IE if no width or height is set */ 
}

Comments

Whoah! কোনও রেপার নেই। ধন্যবাদ!

— পাভেল ভ্লাসভ

Answer 6

এখানে একটি উদাহরণ রয়েছে যা আসুন আপনি পটভূমির রঙ সেট করুন। আপনি যদি ভাসা ব্যবহার করতে না চান, তবে আপনাকে ম্যানুয়ালি প্রস্থ এবং উচ্চতা নির্ধারণ করতে হবে। তবে এটি সত্যিই আশেপাশের সিএসএস / এইচটিএমএল উপর নির্ভর করে।

<style>
#color {
  background-color: red;
  float: left;
}#opacity    {
    opacity : 0.4;
    filter: alpha(opacity=40); 
}
</style>

<div id="color">
  <div id="opacity">
    <img src="image.jpg" />
  </div>
</div>

Answer 7

ধূসর করতে:

"আক্রোমাটিজ করতে।"

filter: grayscale(100%);

@keyframes achromatization {
	0% {}
	25% {}
	75% {filter: grayscale(100%);}
	100% {filter: grayscale(100%);}
}

p {
	font-size: 5em;
	color: yellow;
	animation: achromatization 2s ease-out infinite alternate;
}
p:first-of-type {
	background-color: dodgerblue;
}

<p>
	⚡ Bzzzt!
</p>
<p>
	⚡ Bzzzt!
</p>

"ধূসর দিয়ে পূর্ণ।"

filter: contrast(0%);

@keyframes gray-filling {
	0% {}
	25% {}
	50% {filter: contrast(0%);}
	60% {filter: contrast(0%);}
	70% {filter: contrast(0%) brightness(0%) invert(100%);}
	80% {filter: contrast(0%) brightness(0%) invert(100%);}
	90% {filter: contrast(0%) brightness(0%);}
	100% {filter: contrast(0%) brightness(0%);}
}

p {
	font-size: 5em;
	color: yellow;
	animation: gray-filling 5s ease-out infinite alternate;
}
p:first-of-type {
	background-color: dodgerblue;
}

<p>
	⚡ Bzzzt!
</p>
<p>
	⚡ Bzzzt!
</p>

---

সহায়ক নোট

• সিএসএস 3 ফিল্টার গ্রেস্কেল এবং স্যাচুরের মধ্যে পার্থক্য কী?

• https://www.w3.org/TR/filter-effects-1

Comments

আমি যা চেয়েছিলাম তার বিপরীতে ছিল

— সাইমন জাইক্স

Answer 8

rgba()পরিবর্তে রঙ নির্ধারণ করতে আপনি CSS ব্যবহার করতে পারেন rgb()। এটার মত: style='background-color: rgba(128,128,128, 0.7);

আপনাকে একই রঙ দেয় rgb(128,128,128)তবে acity০% অস্বচ্ছতার সাথে তাই পেছনের জিনিসগুলি কেবল ৩০% থেকে দেখায়। CSS3 তবে এটি ২০০৮ সাল থেকে বেশিরভাগ ব্রাউজারে কাজ করেছে worked দুঃখিত, আমার জানা নেই এমন কোনও #rrggbb সিনট্যাক্স নেই। সংখ্যার সাথে খেলুন - আপনি সাদা দিয়ে ধুয়ে ফেলতে পারেন, ধূসর সাথে ছায়া, যা আপনি মিশ্রিত করতে চান।

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

Answer 9

ফিল্টার বিবেচনা করে: এক্সপ্রেশন হ'ল সিএসএসে মাইক্রোসফ্ট এক্সটেনশন, সুতরাং এটি কেবল ইন্টারনেট এক্সপ্লোরারে কাজ করবে। যদি আপনি এটিকে ধূসর করতে চান তবে আমি আপনাকে সুপারিশ করব যে আপনি কিছুটা জাভাস্ক্রিপ্ট ব্যবহার করে অস্বচ্ছতাটি 50% এ সেট করুন।

http://lyxus.net/mv শুরু করার জন্য একটি ভাল জায়গা হবে কারণ এটি ফায়ারফক্স, সাফারি, কেএইচটিএমএল, ইন্টারনেট এক্সপ্লোরার এবং সিএসএস 3 সক্ষম ব্রাউজারগুলির সাথে কাজ করে এমন একটি অস্বচ্ছ স্ক্রিপ্ট নিয়ে আলোচনা করেছে।

আপনি এটিকে ধূসর সীমানা দিতেও চাইতে পারেন।

Comments

অস্বচ্ছতা একটি CSS3 বৈশিষ্ট্য যদিও, ফিল্টার অংশটি বিশেষত MSIE এর জন্য, অন্য ব্রাউজারগুলি অস্বচ্ছতা বেছে নেবে

— ওভেন