কোনও চিত্রকে এইচটিএমএল / সিএসএসে গ্রেস্কেল রূপান্তর করুন

619

গ্রেস্কেলটিতে কেবল রঙের সাথে কোনও বর্ণ বিটম্যাপ প্রদর্শন করার কোনও সহজ উপায় আছে HTML/CSS?

এটি আইই-সামঞ্জস্যপূর্ণ হওয়ার দরকার নেই (এবং আমি ধারণা করি এটি হবে না) - যদি এটি এফএফ 3 এবং / বা এসএফ 3 এ কাজ করে তবে এটি আমার পক্ষে যথেষ্ট ভাল।

আমি জানি যে আমি SVGএবং ক্যানভাস উভয়ের সাথেই এটি করতে পারি , তবে এখনই এটি অনেকটা কাজের মতো মনে হচ্ছে।

সত্যই কি কোনও অলস ব্যক্তির উপায় আছে?

image  css  grayscale 
— কেন
সূত্র
14
"এটি আইই-সামঞ্জস্যপূর্ণ হওয়ার দরকার নেই (এবং আমি ধারণা করি এটি হবে না)" ?? আইই 1997 এর (আই 4) পরে ডেক্স ফিল্টারগুলির একটি সেট সরবরাহ করছে যা নিছক সিএসএস এবং আরও অনেক কিছু নিয়ে এই কাজ করে। এখন তারা আই 10 তে DX ফিল্টারগুলি ফেলেছে এবং স্ট্যান্ডার্ড এসভিজি ভিত্তিক ফিল্টারগুলি কঠোরভাবে অনুসরণ করছে। আপনি এটি এবং এই ডেমোটি একবার দেখে নিতে চাইতে পারেন ।
— ভলকান রেভেন
8
@ ভলকানরাভেন এটি 'নিছক সিএসএস' নয় - আপনি যদি IE এ সক্রিয় স্ক্রিপ্টিং অক্ষম করেন তবে ফিল্টারগুলি কাজ করা বন্ধ করে দেয়।
— রবার্টক
3
@ আরবার্টক, ঠিক আছে। বিপরীতে, আপনি যদি কোনও ব্রাউজারে জাভাস্ক্রিপ্ট অক্ষম করে রাখেন তবে স্ট্যাকওভারফ্লো সহ প্রায় প্রতিটি আরআইএ কাজ বন্ধ করে দেবে (যদি না ওয়েব বিকাশকারী এইচটিএমএল-কেবল সংস্করণ ফালব্যাক প্রয়োগ না করে)।
— ভলকান রেভেন
2
কেবল সিএসএস স্ট্যাকওভারফ্লো.com/ প্রশ্নগুলি / ২৮62627575 / গ্রে-আউট- আইমেজ- উইথ -সিএসএস / ব্যবহার করুন আমার এই প্রশ্নের উত্তরটি পান
— সাকাটা গিন্টোকি

উত্তর:

728

সিএসএস ফিল্টারগুলির জন্য সমর্থন ওয়েবকিটে এসেছে। সুতরাং আমাদের এখন একটি ক্রস-ব্রাউজার সমাধান রয়েছে।

img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

/* Disable grayscale on hover */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}
<img src="http://lorempixel.com/400/200/">
স্নিপেট প্রসারিত করুন

ইন্টারনেট এক্সপ্লোরার 10 সম্পর্কে কী?

আপনি ধূসর রঙের মতো পলিফিল ব্যবহার করতে পারেন ।

— সালমান আব্বাস
সূত্র
1
@ ক্যামিলোমার্টিন সিএসএস ফিল্টারগুলি কেবল ক্রোম 18+ দ্বারা সমর্থিত
— সালমান ভন আব্বাস
2
আপডেট: গুগল ক্রোমের সর্বশেষ স্থিতিশীল সংস্করণ (19) এখন সিএসএস ফিল্টারগুলিকে সমর্থন করে। হ্যাঁ! =)
— সালমান ভন আব্বাস
6
অপেরা কি কোন সমাধান আছে?
— রুস্তম
23
সুতরাং, আই 10 এর সমাধান কী?
— টম অাগার
2
উত্তরোত্তর জন্য: @ টমআউগার, এই প্রশ্নোত্তরটির IE10 এর জন্য নির্দিষ্ট নির্দেশ রয়েছে।
— বার্নি
127

থেকে নিম্নলিখিত brillout.com এর উত্তর , এবং এছাড়াও রোমান Nurik এর উত্তর , এবং কিছুটা 'না করা SVG' প্রয়োজন শক্তিহানিকর, Firefox চিত্র শুধুমাত্র একটি একক করা SVG ফাইল এবং কিছু সিএসএস ব্যবহার লাইটনেস পারবেন না।

আপনার এসভিজি ফাইলটি দেখতে এইরকম হবে:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
        <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>

রিসোর্স.এসভিজি হিসাবে এটি সংরক্ষণ করুন, আপনি গ্রেস্কেলে পরিবর্তন করতে চান এমন কোনও চিত্রের জন্য এখন থেকে এটি পুনরায় ব্যবহার করা যেতে পারে।

আপনার সিএসএসে আপনি ফায়ারফক্স নির্দিষ্ট filterবৈশিষ্ট্য ব্যবহার করে ফিল্টারটি উল্লেখ করেন :

.target {
    filter: url(resources.svg#desaturate);
}

এমএসের মালিকানাধীন ব্যক্তিদেরও যুক্ত করুন যদি আপনি এটির মতো মনে করেন, গ্রেসকেলে রূপান্তর করতে চান এমন কোনও চিত্রের জন্য সেই শ্রেণিটি প্রয়োগ করুন (ফায়ারফক্স> 3.5, আইই 8 তে কাজ করে) ।

সম্পাদনা করুন : এখানে একটি দুর্দান্ত ব্লগ পোস্ট যা filterএখানে বর্ণিত এসভিজি পদ্ধতির সাথে সংগীতানুষ্ঠানে সালমানপিকে উত্তরটিতে নতুন CSS3 সম্পত্তি ব্যবহার করে বর্ণনা করে । এই পদ্ধতির ব্যবহার করে আপনি এমন কিছু দিয়ে শেষ করতে চান:

img.desaturate{
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
    -webkit-filter: grayscale(100%); /* New WebKit */
    filter: url(resources.svg#desaturate); /* older Firefox */
    filter: grayscale(100%); /* Current draft standard */
}

এখানে ব্রাউজার সমর্থন তথ্য ।

— robertc
সূত্র
6
ওয়েবকিটে আপনি এটি করেন: -webkit-filter: grayscale(100%);তারপরে এটি: -webkit-filter: grayscale(0);এটি সরাতে।
— সানজেএ
@ সানজেএ আপডেটের জন্য ধন্যবাদ, ওয়েবকিট ডিসেম্বরে
— রবার্টক ২
আমি এটি আমার লিনাক্স ল্যাপটপ এবং আমার উইন 7 মেশিনে ক্রোম বিটাতে দেখতে পাচ্ছি। এটি লিনাক্সে ক্রোম স্থিতিশীলে কাজ করছে বলে মনে হয় নি (তবে আবার এটি লিনাক্সের সংস্করণ উইন্ডোজের পিছনে রয়েছে)) '
— সানজেএ
1
এই পদ্ধতিটি ক্রোমে আমার পক্ষে সূক্ষ্মভাবে কাজ করে, তবে সাফারিতে তার কোনও প্রভাব নেই। এফএফ-তে, এটি আমার চিত্রগুলি হোভার অবধি অদৃশ্য করে তুলেছে।
— কলম্বুতে
85

ফায়ারফক্সের জন্য আপনার ফিল্টার.এসভিজি ফাইল তৈরি করার দরকার নেই, আপনি ডেটা ইউআরআই স্কিম ব্যবহার করতে পারেন ।

প্রথম উত্তরের CSS কোড গ্রহণ করলে তা পাওয়া যায়:

filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(100%); /* Current draft standard */
-webkit-filter: grayscale(100%); /* New WebKit */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%);
filter: gray; /* IE6+ */

আপনার ফাইল এনকোডিং দ্বারা "utf-8" স্ট্রিং প্রতিস্থাপন যত্ন নিন।

এই পদ্ধতিটি অন্যটির চেয়ে দ্রুত হওয়া উচিত কারণ ব্রাউজারটির দ্বিতীয় এইচটিটিপি অনুরোধ করার প্রয়োজন হবে না।

— mquandalle
সূত্র
3
মাথা ব্যথা বাঁচাতে কেবল একটি নোট: ওয়াইউআই কমপ্রেসার ডেটা ইউআরএলগুলিতে ফাঁকা স্থান ফেলে। সুতরাং আপনি যদি এই সমাধানটি ব্যবহার করতে চান তবে আপনি অন্য একটি মিনিফায়ার ব্যবহার বিবেচনা করতে পারেন।
— মাল্টে
6
@ মাল্ট বা সম্ভবত "% 20" স্ট্রিং দ্বারা স্পেসগুলি প্রতিস্থাপন করবেন?
— ম্যাকুণ্ডল
@ ম্যাক্যান্ডেল দুর্ভাগ্যক্রমে আই 1010 ফিল্টার সমর্থন করে না: ধূসর ব্লগস.এমএসএনএন
— বি /
1
ফায়ারফক্সে আমার ধূসর খুব হালকা। বৈসাদৃশ্য বাড়ানোর বা কিছুটা অন্ধকার করার কোনও উপায় আছে কি? অন্যান্য ব্রাউজারগুলি দুর্দান্ত দেখায়।
— স্কয়ার_ইয়েজ
27

আপডেট: আমি এটি IE10 এবং IE11 এর জন্য জাভাস্ক্রিপ্ট পলিফিল সহ একটি সম্পূর্ণ গিটহাব রেপোতে পরিণত করেছি: https://github.com/karlhorky/gray

আমি প্রথমে সালমানপিকে-র উত্তরটি ব্যবহার করেছিলাম , তবে তারপরে এসভিজি ফাইলের জন্য প্রয়োজনীয় অতিরিক্ত এইচটিটিপি অনুরোধটি অপসারণ করতে নীচের প্রকরণটি তৈরি করেছি। ইনলাইন এসভিজি ফায়ারফক্সের 10 এবং তদূর্ধ্ব সংস্করণগুলিতে কাজ করে এবং 10 এর চেয়ে কম সংস্করণগুলি বিশ্বব্যাপী ব্রাউজারের এমনকি 1% এর জন্য অ্যাকাউন্ট করে না।

আমি তখন থেকে সমাধানটিকে এই ব্লগ পোস্টে আপডেট করে রেখেছি , রঙে ফিরে ফর্সা করার জন্য সমর্থন, এসভিজির সাথে IE 10/11 সমর্থন এবং ডেমোতে আংশিক গ্রেস্কেল।

img.grayscale {
  /* Firefox 10+, Firefox on Android */
  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");

  /* IE 6-9 */
  filter: gray;

  /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  -webkit-filter: grayscale(100%);
}

img.grayscale.disabled {
  filter: none;
  -webkit-filter: grayscale(0%);
}
— কার্ল হর্কি
সূত্র
14

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

http://james.padolsey.com/demos/grayscale/

— chrismacp
সূত্র
11

ঠিক আজ একই সমস্যা পেয়েছি। আমি প্রথমে সালমানপিকে সমাধানটি ব্যবহার করেছি তবে এফএফ এবং অন্যান্য ব্রাউজারগুলির মধ্যে প্রভাবটি পৃথক হয়ে গেছে। এর কারণ রূপান্তর ম্যাট্রিক্স কেবলমাত্র ক্রোম / আইই তে ফিল্টারগুলির মতো আলোকিততা নয় not আমার অবাক করে দিয়েছি যে এসভিজির বিকল্প এবং সহজ সমাধানটি এফএফ 4 + এও কাজ করে এবং আরও ভাল ফলাফল দেয়:

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="desaturate">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
</svg>

সিএসএস সহ:

img {
    filter: url(filters.svg#desaturate); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

আরও একটি সতর্কতা হ'ল আইই 10 "ফিল্টার: ধূসর:" কে আর মানদণ্ডের সাথে সামঞ্জস্যপূর্ণ মোডে সমর্থন করে না, কাজ করতে হেডারে সামঞ্জস্যতা মোড সুইচ দরকার:

<meta http-equiv="X-UA-Compatible" content="IE=9" />
— RobertT
সূত্র
2
একটি আরও ভাল, সহজ সমাধান বলে মনে হচ্ছে - সালমানপিকে এবং ম্যাকানডাল যদি এর সমাধানগুলি আপডেট করে। দৃশ্যত তারা যে ম্যাট্রিক্সটি ব্যবহার করেছেন তা নষ্ট হয়েছে <br> <br> এখানে এম্বেড করা ডেটা সংস্করণটি রয়েছে: filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/></filter></svg>#grayscale");
— PSdie
11

একচেটিয়াভাবে CSS এর মাধ্যমে গ্রেস্কেল অর্জনের সহজ উপায় filterসম্পত্তিটির মাধ্যমে via

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

সম্পত্তিটি এখনও পুরোপুরি সমর্থিত নয় এবং এখনও -webkit-filterসমস্ত ব্রাউজার জুড়ে সহায়তার জন্য সম্পত্তিটির প্রয়োজন requires

— এন কে চৌধুরী
সূত্র
7

এমনকি এটি CSS3 বা মালিকানাধীন -webkit-বা -moz-সিএসএস বৈশিষ্ট্য সহ (এখনও) সম্ভব বলে মনে হচ্ছে না ।

তবে, আমি গত জুন থেকে এই পোস্টটি খুঁজে পেয়েছি যা এইচটিএমএলে এসভিজি ফিল্টার ব্যবহার করেছে। কোনও বর্তমান ব্রাউজারে উপলব্ধ নয় (একটি কাস্টম ওয়েবকিট বিল্ডে ডেমো ইঙ্গিত দেওয়া), তবে ধারণার প্রমাণ হিসাবে খুব চিত্তাকর্ষক।

— রোমান নুরিক
সূত্র
7

অন্যান্য উত্তরগুলিতে উপেক্ষা করা IE10 + সমর্থন সম্পর্কে জিজ্ঞাসা করা লোকদের জন্য, সিএসএসের এই অংশটি চেকআউট করুন:

img.grayscale:hover {
    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");
}

svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

svg image:hover {
    opacity: 0;
}

এই মার্কআপটিতে প্রয়োগ করা হয়েছে:

<!DOCTYPE HTML>
<html>
<head>

    <title>Grayscaling in Internet Explorer 10+</title>

</head>
<body>

    <p>IE10 with inline SVG</p>
    <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
      <defs>
         <filter id="filtersPicture">
           <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
           <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
        </filter>
      </defs>
      <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
    </svg>

</body>
</html>

আরো গণদেবতা জন্য, চেকআউট ইন্টারনেট testdrive এর সিএসএস 3 গ্রাফিক্স অধ্যায় এবং এই পুরাতন ইন্টারনেট ব্লগ http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

— অ্যানি
সূত্র
7

ইন্টারনেট এক্সপ্লোরারে ফিল্টার সম্পত্তি ব্যবহার করুন।

ওয়েবকিট এবং ফায়ারফক্সে বর্তমানে কেবলমাত্র সিএসএসের সাহায্যে কোনও চিত্র আলাদা করার কোনও উপায় নেই। সুতরাং আপনাকে ক্লায়েন্টের সাইড সলিউশনের জন্য ক্যানভাস বা এসভিজি ব্যবহার করতে হবে।

তবে আমি মনে করি এসভিজি ব্যবহার করা আরও মার্জিত। ফায়ারফক্স এবং ওয়েবকিট উভয়ের জন্যই কাজ করে এমন এসভিজি সমাধানের জন্য আমার ব্লগ পোস্টটি দেখুন: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

এবং কঠোরভাবে বলতে গেলে এসভিজি এইচটিএমএল হওয়ায় সমাধানটি খাঁটি এইচটিএমএল + সিএসএস :-)

— brillout
সূত্র
হাই ব্রিলআউট আমি লক্ষ্য করেছি যে আপনার গ্রেস্কেলটি আসলে সাফারিতে ব্যর্থ। কোন ফলোআপ? ধন্যবাদ
— 20'11
1
এসভিজি এইচটিএমএল নয় । এটি সম্পূর্ণ ভিন্ন ধারণা।
— ক্যামিলো মার্টিন
@ ক্যামিলোমার্টিন এইচটিএমএল অনুমানে এসভিজি রয়েছে ।
— রবার্টক
1
@ রবার্টক লিঙ্কটি কোনও এইচটিএমএলে একটি এসভিজি লাগানোর বিষয়ে, তবে এখানে এসভিজি স্পেক এবং এখানে এইচটিএমএল স্পেকটি রয়েছে । উভয় একে অপরের সাথে সমান (বা এক্সএমএল) এর অর্থ এই নয় যে তারা একই জিনিস ...
— ক্যামিলো মার্টিন
1
তবে এটি SVG স্পেসের সাথে রেফারেন্সে লিঙ্ক করেছে ... এটি এসভিজির সংজ্ঞা দেয় না, কেবল বলেছেন যে ব্রাউজারগুলি এটি পার্স করা উচিত। এটি জাভাস্ক্রিপ্ট বা সে ক্ষেত্রে সিএসএসের মতো।
— ক্যামিলো মার্টিন
6

এটি করার একটি নতুন উপায় আধুনিক ব্রাউজারগুলিতে কিছু সময়ের জন্য উপলভ্য।

পটভূমি-মিশ্রণ-মোড আপনাকে কিছু আকর্ষণীয় প্রভাব পেতে দেয় এবং এর মধ্যে একটি গ্রেস্কেল রূপান্তর

একটি সাদা পটভূমিতে সেট করা মান আলোকিততা এটির অনুমতি দেয়। (ধূসরতে এটি দেখতে হোভার করুন)

.test {
  width: 300px;
  height: 200px;
    background: url("http://placekitten.com/1000/750"), white; 
    background-size: cover;
}

.test:hover {
    background-blend-mode: luminosity;
}
<div class="test"></div>
স্নিপেট প্রসারিত করুন

আলোকসজ্জাটি চিত্র থেকে নেওয়া হয়, রঙটি পটভূমি থেকে নেওয়া হয়। যেহেতু এটি সর্বদা সাদা, কোনও রঙ নেই।

তবে এটি আরও অনেক কিছু করতে দেয়।

আপনি প্রভাব 3 টি স্তর সেট এনিমেট করতে পারেন। প্রথমটির চিত্রটি হবে এবং দ্বিতীয়টি হবে সাদা-কালো গ্রেডিয়েন্ট। আপনি যদি এটিতে একটি বহুগুণ মিশ্রণ মোড প্রয়োগ করেন তবে আপনি সাদা অংশের মতো আগের মতো একটি সাদা ফলাফল পাবেন তবে কালো অংশের মূল চিত্রটি (সাদা দ্বারা বহুগুণ সাদা দেয়, কালো দ্বারা গুণিত করার কোনও প্রভাব নেই))

গ্রেডিয়েন্টের সাদা অংশে, আপনি আগের মতো একই প্রভাব পান। গ্রেডিয়েন্টের কালো অংশে, আপনি নিজের উপর ইমেজটি মিশ্রিত করছেন, এবং ফলাফলটি অশোধিত চিত্র।

এখন, এফেক্টটি ডায়নামিক হওয়ার জন্য গ্রেডিয়েন্টটি সরিয়ে নেওয়া দরকার: (এটি রঙে দেখতে হোভার করুন)

div {
    width: 600px;
    height: 400px;
}

.test {
    background: url("http://placekitten.com/1000/750"), 
linear-gradient(0deg, white 33%, black 66%), url("http://placekitten.com/1000/750"); 
    background-position: 0px 0px, 0px 0%, 0px 0px;
    background-size: cover, 100% 300%, cover;
    background-blend-mode: luminosity, multiply;
    transition: all 2s;
}

.test:hover {
    background-position: 0px 0px, 0px 66%, 0px 0px;
}
<div class="test"></div>
স্নিপেট প্রসারিত করুন

উল্লেখ

সামঞ্জস্য ম্যাট্রিক্স

— Vals
সূত্র
1
@ অ্যান্ডি আমি আমার উত্তরটি আধুনিক ব্রাউজারগুলিতে
— ভ্যালস
আপনি যদি আবেদন করতে পারেন কোনও imgট্যাগটি যদি চিত্রটির জন্য ব্যবহার করা হয়background: url()
— মোহাম্মদ এলবান্না
1
@MohammadElbanna আপনি প্রয়োজন পটভূমি-ব্লেন্ডিং-মোড পরিবর্তে ব্যবহার মিশ্রণ-ব্লেন্ডিং-মোডে
— Vals
5 
img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
— Amee
সূত্র
4

এই উপায় আপনাকে সাহায্য করতে পারে

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

w3schools.org

— Yuza
সূত্র
3

আইপি সহ এটি করা সহজতর, যদি আমি স্বত্বাধিকারী সিএসএস সম্পত্তিটি সঠিকভাবে ব্যবহার করে মনে করি। এই ব্যবহার করে দেখুন FILTER: Grayথেকে http://www.ssi-developer.net/css/visual-filters.shtml

এক্স দ্বারা পদ্ধতিটি কেবল চিত্রটিকে স্বচ্ছ করে তোলে এবং এর পিছনে একটি কালো পটভূমি রয়েছে। আমি নিশ্চিত যে আপনি তর্ক করতে পারেন এটি গ্রেস্কেল।

যদিও আপনি জাভাস্ক্রিপ্ট ব্যবহার করতে চান নি, আমি মনে করি এটি ব্যবহার করতে হবে। এটি করতে আপনি একটি সার্ভার সাইড ল্যাঙ্গুয়েজও ব্যবহার করতে পারেন।

— Alex
সূত্র
আমার কাছে উইন্ডোজ বাক্সও নেই, তাই ধন্যবাদ, তবে এটি আমার পক্ষে খুব কম ব্যবহার।
— কেন
সেক্ষেত্রে, আপনি এটি IE সহ ভার্চুয়াল মেশিনের সাথে দেখতে পারেন, কুড়ালটির পদ্ধতি প্রয়োগ করতে পারেন বা ক্যানভাস ব্যবহার করতে পারেন ... নোট করুন যে ক্যানভাসের সাহায্যে বৃহত চিত্রগুলিতে গ্রেস্কেলিং জাভাস্ক্রিপ্ট ইঞ্জিনে বেশ কর দিতে পারে।
— অ্যালেক্স
7
filter: grayসংস্করণ 4 থেকে ইন্টারনেট এক্সপ্লোরারে উপস্থিত রয়েছে । তারা তাদের পণ্যটির জন্য প্রচুর জঞ্জাল নিয়েছে - ঠিক! - তবে তারা এই জিনিসগুলির সাথে তাদের সময়ের চেয়ে সত্যই এগিয়ে ছিল
— পেক্কা
2

আপনি যদি জাভাস্ক্রিপ্ট ব্যবহার করতে ইচ্ছুক হন, তবে আপনি চিত্রটি গ্রেস্কেলতে রূপান্তর করতে একটি ক্যানভাস ব্যবহার করতে পারেন। যেহেতু ফায়ারফক্স এবং সাফারি সমর্থন করে <canvas>, এটি কাজ করা উচিত।

সুতরাং আমি "ক্যানভাস গ্রেস্কেল" গুগলড করেছিলাম এবং প্রথম ফলাফলটি http://www.permadi.com / টিউটোরিয়াল /jsCanvasGrayscale/index.html যা কাজ করে বলে মনে হচ্ছে।

— শালম ক্রিমার
সূত্র
2

ওয়েবকিটে নেটিভ সিএসএস ফিল্টারগুলির জন্য সমর্থনটি বর্তমান সংস্করণ 19.0.1084.46 থেকে যুক্ত করা হয়েছে

so -webkit- ফিল্টার: গ্রেস্কেল (1) কাজ করবে এবং যা ওয়েবকিটের জন্য এসভিজি পদ্ধতির চেয়ে সহজ ...

— hjindal
সূত্র
2

এখানে কমের জন্য একটি মিশ্রণ যা আপনাকে যে কোনও ধরণের অস্বচ্ছতা বেছে নিতে দেয়। বিভিন্ন শতাংশে প্লেইন সিএসএসের জন্য ভেরিয়েবলগুলি নিজেকে পূরণ করুন।

এখানে পরিষ্কার ইঙ্গিত , এটি ম্যাট্রিক্সের জন্য পরিপূর্ণ ধরণের ব্যবহার করে যাতে শতাংশ পরিবর্তন করতে আপনাকে কোনও অভিনব অভিনব করার দরকার নেই।

.saturate(@value:0) {
    @percent: percentage(@value);

    filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='saturate'%20values='@value'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: grayscale(@percent); /* Current draft standard */
    -webkit-filter: grayscale(@percent); /* New WebKit */
    -moz-filter: grayscale(@percent);
    -ms-filter: grayscale(@percent);
    -o-filter: grayscale(@percent);
}

তারপরে এটি ব্যবহার করুন:

img.desaturate {
    transition: all 0.2s linear;
    .saturate(0);
    &:hover {
        .saturate(1);
    }
}
— জেমস ভ্যান ডাইক
সূত্র
2

আপনার সম্পূর্ণ ব্যবহারের জন্য এতগুলি উপসর্গ ব্যবহার করার দরকার নেই, কারণ আপনি যদি পুরানো ফায়ারফক্সের উপসর্গটি বেছে নেন তবে নতুন ফায়ারফক্সের জন্য আপনার উপসর্গের প্রয়োজন হবে না।

সুতরাং সম্পূর্ণ ব্যবহারের জন্য, এই কোডটি যথেষ্ট ব্যবহার করুন:

img.grayscale {
    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: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

img.grayscale.disabled {
    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: none;
    -webkit-filter: grayscale(0%);
}
— Mato
সূত্র
2

অন্যের উত্তরের পরিপূরক হিসাবে, এসভিজির ম্যাট্রিক্সের মাথা ব্যথা ছাড়াই কোনও চিত্রকে এফএফের অর্ধেক পথ বিশিষ্ট করা সম্ভব :

<feColorMatrix type="saturate" values="$v" />

যেখানে এবং এর $vমাঝে রয়েছে । এর সমতুল্য ।01filter:grayscale(50%);

সরাসরি উদাহরণ:

কোড স্নিপেট দেখান

এমডিএন-তে রেফারেন্স

— Bigood
সূত্র
1

রবার্টকের উত্তরের ভিত্তিতে :

এর মতো ম্যাট্রিক্স ব্যবহার না করে রঙিন চিত্র থেকে গ্রেস্কেল চিত্রে যথাযথ রূপান্তর পেতে :

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

আপনার মত রূপান্তর ম্যাট্রিক্স ব্যবহার করা উচিত: 

0.299 0.299 0.299 0
0.587 0.587 0.587 0
0.112 0.112 0.112 0
0     0     0     1

আরজিবিএ (লাল-সবুজ-নীল-আলফা) মডেলের উপর ভিত্তি করে সমস্ত ধরণের চিত্রের জন্য এটি সূক্ষ্মভাবে কাজ করা উচিত।

আপনার ম্যাট্রিক্স কেন ব্যবহার করবেন সে সম্পর্কে আরও তথ্যের জন্য আমি আরও সম্ভবত পোস্ট করেছি যে রবার্টকের একটিতে নিম্নলিখিত লিঙ্কগুলি লিঙ্ক করা হয়েছে:

— Kajiyama
সূত্র
আমি মানি 0.3333 ভুল; 0.2126 0.7152 0.0722 0 0সমতুল্য উপস্থিত হতে পারে<fecolormatrix type="saturate" values="0">
— নিল
"এবং এখানে আপনি কিছু সি # এবং ভিবি কোডগুলি পেতে পারেন" এর লিঙ্কটি এখানে ইন্টারনেট সংরক্ষণাগারটিতে পাওয়া যাবে: web.archive.org/web/20110220101001/http://www.bobpowell.net/…
— thisgeek
"আলোক এবং রঙের পার্থক্য সংকেত" এর লিঙ্কটিও নষ্ট হয়ে গেছে। আমি কোনও প্রতিস্থাপন খুঁজে পাইনি।
— thisgeek
0

একটি ভয়ঙ্কর তবে কার্যক্ষম সমাধান: একটি ফ্ল্যাশ অবজেক্ট ব্যবহার করে চিত্রটি রেন্ডার করুন, যা আপনাকে ফ্ল্যাশ-এ সমস্ত রূপান্তর সম্ভবপর করে দেয়।

যদি আপনার ব্যবহারকারীরা রক্তপাতের প্রান্তের ব্রাউজারগুলি ব্যবহার করছেন এবং যদি ফায়ারফক্স 3.5 এবং সাফারি 4 এটি সমর্থন করে (আমি জানি না হয় / করবে) তবে আপনি চিত্রটির সিএসএস রঙ-প্রোফাইল বৈশিষ্ট্যটি সামঞ্জস্য করতে পারেন , এটি একটি গ্রেস্কেল আইসিসিতে সেট করে setting প্রোফাইল URL. তবে তা যদি অনেকটা হয়!

— richardtallent
সূত্র
0

হতে পুরোনো ব্রাউজারের জন্য একটি বিকল্প ব্যবহার মাস্ক সিউডো-উপাদান অথবা ইনলাইন ট্যাগ দ্বারা উত্পাদিত হতে পারে।

সম্পূর্ণ পজিশনিং একটি ইমগ হোভার (বা পাঠ্য অঞ্চল যার কোনও ক্লিক বা নির্বাচনের প্রয়োজন নেই) রঙ স্কেলের প্রভাবগুলি ঘনিষ্ঠভাবে নকল করতে পারে, আরজিবা () বা ট্রান্সলুসাইড পিএনজি এর মাধ্যমে ।

এটি একটি একক রঙ স্কেল দেয় না, তবে শেডগুলি রঙের সীমার বাইরে।

সিউডো-এলিমেন্টের মাধ্যমে 10 টি ভিন্ন রঙের সাথে কোড পেনের পরীক্ষা করুন, শেষটি ধূসর। http://codepen.io/gcyrillus/pen/nqpDd (অন্য ছবিতে স্যুইচ করতে পুনরায় লোড করুন)

— জি-Cyrillus
সূত্র
0

এই jquery প্লাগইন চেষ্টা করুন। যদিও এটি কোনও খাঁটি এইচটিএমএল এবং সিএসএস সমাধান নয়, তবে আপনি যা চান তা অর্জনের এটি একটি অলস উপায়। আপনি আপনার ব্যবহারের সর্বোত্তম অনুসারে আপনার গ্রেস্কেলটি অনুকূলিত করতে পারেন। এটি অনুসরণ হিসাবে ব্যবহার করুন:

$("#myImageID").tancolor();

একটি ইন্টারেক্টিভ ডেমো আছে । আপনি এটি সঙ্গে চারপাশে খেলতে পারেন।

ব্যবহারের জন্য ডকুমেন্টেশন পরীক্ষা করে দেখুন, এটি বেশ সহজ। ডক্স

— নিকোলাস টিজে
সূত্র
0

ফায়ারফক্সে শতাংশ হিসাবে গ্রেস্কেলের জন্য, পরিবর্তে স্যাচুরেটর ফিল্টার ব্যবহার করুন: ('স্যাচুরেট' অনুসন্ধান করুন)

filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='saturate'><feColorMatrix in='SourceGraphic' type='saturate' values='0.2' /></filter></svg>#saturate"
— dval
সূত্র
-1

যদি আপনি বা ভবিষ্যতে অন্য কেউ একই ধরণের সমস্যার মুখোমুখি হন তবে পিএইচপি করার জন্য উন্মুক্ত। (আমি জানি আপনি এইচটিএমএল / সিএসএস বলেছেন, তবে সম্ভবত আপনি ইতিমধ্যে ব্যাকএন্ডে পিএইচপি ব্যবহার করছেন) এখানে একটি পিএইচপি সমাধান রয়েছে:

আমি পিএইচপি জিডি লাইব্রেরি থেকে পেয়েছি এবং প্রক্রিয়াটি স্বয়ংক্রিয় করতে কিছু পরিবর্তনশীল যুক্ত করেছি ...

<?php
$img = @imagecreatefromgif("php.gif");

if ($img) $img_height = imagesy($img);
if ($img) $img_width = imagesx($img);

// Create image instances
$dest = imagecreatefromgif('php.gif');
$src = imagecreatefromgif('php.gif');

// Copy and merge - Gray = 20%
imagecopymergegray($dest, $src, 0, 0, 0, 0, $img_width, $img_height, 20);

// Output and free from memory
header('Content-Type: image/gif');
imagegif($dest);

imagedestroy($dest);
imagedestroy($src);

?>
— Trufa
সূত্র
4
@ টম, মূল প্রশ্নের ভিত্তিতে ভোট এবং পছন্দসই ভিত্তিতে, ওপি একমাত্র ব্যক্তি নন যিনি ভাবেন যে এটি সম্ভব কিনা। অবশ্যই, এই উত্তরটি নিয়মগুলি বাঁকতে পারে, তবে আমি এমন কোনও উত্তরকে গুরুত্ব দিয়ে দেখছি না যা অনেক লোকের পক্ষে উপযোগী হতে পারে।
— মাইকেল মার্টিন-স্মাকার
1
@ টম, আমি যদিও এটি প্রশ্নের সঠিক উত্তর নাও হতে পারে তবে এটি জাভাস্ক্রিপ্টের "ঝামেলা" ছাড়াই গ্রেস্কেলের সমস্যাটি "সমাধান" করার কারণে এটি কার্যকর হতে পারে, সম্ভবত তিনি পিএইচপি সম্পর্কেও বিবেচনা করেননি বা জানেন না জিডি, কোনও ক্ষতি করার উদ্দেশ্যে নয়। @ এমএমএমএস 13 ঠিক সেই বিষয়টি ছিল, ধন্যবাদ :)
— ট্রুফা
এটি আমার খারাপ, "চিন্তাভাবনা" সম্পর্কে যে অন্য ব্যবহারকারীরা এই পোস্টটি থেকে উপকৃত হতে পারে সে সম্পর্কে আমার মন থেকে দূরে সরে গেছে .. ক্ষমা প্রার্থনা @ ট্রাফা।
— ধাক্কা
3
এটি আমাকে সাহায্য করেছিল, আরও কয়েকটা মৃত শেষ হওয়ার পরে আমাকে সঠিক পথে রাখ on আমি দেখতে পেলাম যে "ইমেজফিল্টার ($ উত্স, IMG_FILTER_GRAYSCALE) ব্যবহার করে;" যদিও আরও ভাল ফলাফল দিয়েছে। (কেবলমাত্র পিএইচপি 5)
— ক্রিসম্যাকপ
5
ভোট দেওয়া হয়েছে, যেহেতু এটি কার্যত বন্ধ। সার্ভার সাইডে একটি চিত্র গ্রেস্কেলিং সিএসএস / এইচটিএমএল থেকে সম্পূর্ণ পৃথক।
— সাইমন স্টেইনবার্গার
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.