সিএসএসের মাধ্যমে পিএনজি চিত্রের রঙ পরিবর্তন করবেন?

Question

একটি স্বচ্ছ পিএনজি দেওয়া যা সাদা রঙে একটি সাধারণ আকার দেখায়, এটি কি কোনওভাবে CSS এর মাধ্যমে রঙের পরিবর্তন করা সম্ভব? একরকম ওভারলে বা কী না?

Comments

আপনি background-colorCSS সম্পত্তি সেট করতে পারেন । আপনি স্থির হবে এমন অপ-স্বচ্ছ অংশ এবং চিত্রের স্বচ্ছ অংশ তৈরি করতে পারেন যা CSS এর মাধ্যমে আপনার পছন্দ মতো কোনও রঙ দ্বারা ভরাট হবে। আপনি কি এটি অর্জন করতে চান?

— jakub.g

@ কিবিবি, এটি কেবল একটি মন্তব্য নয়, একটি উত্তরের মূল্য। এবং আপনি প্রযুক্তিগতভাবে আমাকে 1 সেকেন্ড দ্বারা প্রহার করলেন।

— কিরিল জি

100% কালো বা 100% সাদা (ব্যাকগ্রাউন্ড স্বচ্ছ থাকে) যে কোনও আইকন পুনর্বিবেচনার জন্য আপনি মিশ্রণ মোডের সাথে পিজিও-উপাদানগুলি ব্যবহার করতে পারেন background আমার উত্তর এখানে দেখুন:

— stackoverflow.com/a/39796437/1472114

Answer 1

আপনি -webkit-filterএবং এর সাথে ফিল্টারগুলি ব্যবহার করতে পারেন filter: ফিল্টারগুলি ব্রাউজারগুলির তুলনায় তুলনামূলকভাবে নতুন তবে নীচের CanIUse সারণি অনুসারে 90% এর বেশি ব্রাউজারগুলিতে সমর্থিত: https://caniuse.com/#feat=css-filters

আপনি একটি চিত্র গ্রেস্কেল, সেপিয়া এবং আরও অনেক কিছুতে পরিবর্তন করতে পারেন (উদাহরণটি দেখুন)।

সুতরাং আপনি এখন ফিল্টারগুলির সাথে একটি পিএনজি ফাইলের রঙ পরিবর্তন করতে পারেন।

body {
    background-color:#03030a;
    min-width: 800px;
    min-height: 400px
}
img {
    width:20%;
    float:left; 
     margin:0;
}
/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }

<!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg -->
<img alt="Mona Lisa" src="https://www.pexels.com/photo/photo-of-a-green-leaf-2563743/?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="original">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="saturate" class="saturate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="contrast" class="contrast">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="brightness" class="brightness">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="blur" class="blur">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="invert" class="invert">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="sepia" class="sepia">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="opacity" class="rss opacity">

_{সূত্র}

Comments

এত সংক্ষিপ্ত উত্তরটি হ'ল সংখ্যাগরিষ্ঠ ব্রাউজারগুলির জন্য কোনও সাধারণ সমাধান নেই।

— ট্রায়ারিলিয়ন

তবে হায়রোোটেট বা স্যাচুরেট আসলে কোনও সাদা ছবিকে অ্যান্থিং করবে?

— কিথ

২০১

— স্টান

@ ডেটাটাইপ_ভয়েড কখনও কখনও আপনি শুরু করা চিত্রটি নিজেই নিয়ন্ত্রণ করেন না। সুতরাং, দেখে মনে হচ্ছে আপনি আমার মতামতটি বৈধ, আপনি কালো বা সাদা থেকে কোনও রঙ পেতে পারেন না। ওহ, এবং এই সিদ্ধান্তে পৌঁছতে আমি 5 মিনিটেরও বেশি সময় ধরে খেলেছি।

— AsGoodAsItGates

এছাড়াও আপনি এটি স্টাফ করতে পারেন তা নির্দিষ্ট করুন: .gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); }যার অর্থ আপনি কালো এবং স্বচ্ছ বা গ্রেস্কেল থেকে রঙে যেতে পারেন এবং এটি অ্যানিমেটেড জিআইএফ

— তেও

Answer 2

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

সিএসএস ফিল্টার জেনারেটরটিকে কালো থেকে টার্গেট করে হেক্স রঙে রূপান্তর করতে

উদাহরণস্বরূপ আমার নীচের রঙটি # 1a9790 থাকতে আমার পিএনজি দরকার

তারপরে আপনাকে পিএনজিতে নিম্নলিখিত ফিল্টারটি প্রয়োগ করতে হবে

filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);

Comments

<3 <3 <3 <3 <3 <3

— dwjohnston

এই কোডটি ব্যবহার করে আমি নীল থেকে সাদা রঙে পরিবর্তন করেছি:filter: invert(1%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%);

— অঞ্জন বিশ্বাস

এটা অসাধারণ!!

— থিয়াগো পাইরেস

লেখক একটি মূর্তি প্রাপ্য! (দ্রষ্টব্য: উজ্জ্বলতা (0) স্যাচুরেট (100%)

— optionচ্ছিক প্রিপেন্ড

কারও যদি এটির প্রয়োজন হয় তবে এখানে এই কোডটির

— dwjohnston

Answer 3

আপনি আইকন ফন্টগুলি একবার দেখতে চাইবেন। http://css-tricks.com/examples/IconFont/

সম্পাদনা: আমি আমার সর্বশেষ প্রকল্পে ফন্ট-আশ্চর্যজনক ব্যবহার করছি । আপনি এটি বুটস্ট্র্যাপ করতে পারেন। কেবল এটি আপনার মধ্যে রাখুন <head>:

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">

<!-- And if you want to support IE7, add this aswell -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">

এবং তারপরে এগিয়ে যান এবং এর মতো কয়েকটি আইকন-লিঙ্ক যুক্ত করুন:

<a class="icon-thumbs-up"></a>

এখানে সম্পূর্ণ প্রতারণার শীট

--edit--

ফন্ট-আশ্চর্যজনক নতুন সংস্করণে বিভিন্ন শ্রেণীর নাম ব্যবহার করে, সম্ভবত এটি সিএসএস ফাইলগুলিকে মারাত্মকভাবে ছোট করে তোলে এবং অস্পষ্ট সিএসএস ক্লাসগুলি এড়ানোর জন্য। সুতরাং এখন আপনার ব্যবহার করা উচিত:

<a class="fa fa-thumbs-up"></a>

সম্পাদনা 2:

সন্ধান পেয়েছে গিথুব তার নিজস্ব আইকন ফন্টও ব্যবহার করে: অক্টোটিকন এটি ডাউনলোডের জন্য নিখরচায় । আপনার নিজস্ব আইকন ফন্টগুলি কীভাবে তৈরি করবেন সে সম্পর্কেও তাদের কিছু টিপস রয়েছে ।

Comments

হরফ হ'ল ফন্ট অসাধারণ

— HerrimanCoder

বক্সের বাইরে চিন্তা করার জন্য +1 এবং আজকাল অনলাইনে অ্যাপ্লিকেশনগুলি আপনাকে একটি (এসভিজি) চিত্র থেকে একটি ওয়েবফন্ট তৈরি করতে সহায়তা করার জন্য সহজ।

— ইয়ান ভাণ্ডার স্যান্ডেন

<a class="icon-thumbs-up "> </a> যদি পুরানো শ্রেণীর নাম এবং <a class="fa fa -thumbs-up"> </a> নতুন হয় তবে আমি এটি মনে করি না সিএসএসকে ছোট করে তোলে, আমি ফা এবং ফা-থম্বস-আপের মধ্যে একটি অতিরিক্ত শ্বেতস্পেস দেখতে পাচ্ছি, যদি আমি ভুল না করি তবে সেই সিএসএস ফাইলটিতে কমপক্ষে 1 টি অতিরিক্ত বাইট যুক্ত করতে পারি?

— ব্র্যান্ডিতো

ফন্ট আশ্চর্যজনক আজকের দিনটিতে দুর্দান্ত ছিল, দুর্ভাগ্যক্রমে এটি রেন্ডার করা অবরুদ্ধ করে, যা গুগল করে তোলে এবং ব্যবহারকারীরা অসন্তুষ্ট হয়। আমরা প্রথমে সিএসএস এবং বাইনারি ফন্ট ফাইল উভয় থেকে অব্যবহৃত ফন্টগুলি সরিয়ে, প্রায় অর্ধেক করে ডেটা হ্রাস করে এটিকে সম্বোধন করেছি। আমরা এখন সম্পূর্ণ মুছে ফেলার এবং একটি সহজ স্প্রাইট দিয়ে প্রতিস্থাপনের প্রক্রিয়ায় রয়েছি, যা ব্লকিং রেন্ডার করে না (ডিওএম এবং সিএসএসএম প্রক্রিয়া দ্রুততর করে তোলে, পৃষ্ঠায় উপাদানগুলিকে দ্রুত প্রদর্শিত করে), এবং আরও 75৫% হ্রাস করে 6 কেবি-তে নামিয়ে আনে। এফএ প্রায় 100KB এর কাছাকাছি। সিএসএস মুখোশগুলি আমাদের ক্ষেত্রে সহায়তা করতে পারে তবে সম্ভবত অপ্রয়োজনীয়।

— ওয়াই কে

Answer 4

আমি এসভিজি ফিল্টার ব্যবহার করে এটি করতে সক্ষম হয়েছি। আপনি এমন একটি ফিল্টার লিখতে পারেন যা আপনি পরিবর্তন করতে চান এমন রঙের সাথে উত্স চিত্রের রঙকে বাড়িয়ে তোলে। নীচের কোড স্নিপেটে, বন্যার রঙ হ'ল রঙ যা আমরা চিত্রের রঙে পরিবর্তন করতে চাই (যা এই ক্ষেত্রে লাল) পাটিগণিত সহ ফে-কমপোজাইটের সূত্রটি হ'ল (কে 1 * আই 1 * আই 2 + কে 2 * আই 1 + কে 3 * আই 2 + কে 4) যেখানে i1 এবং i2 ইনপুট / ইন 2 অনুসারে ইনপুট রঙ। সুতরাং কেবলমাত্র কে 1 = 1 নির্দিষ্ট করার অর্থ এটি কেবল আই 1 * আই 2 করবে, যার অর্থ উভয় ইনপুট রঙ একসাথে গুন করা।

দ্রষ্টব্য: এটি কেবল HTML5 এর সাথে কাজ করে কারণ এটি ইনলাইন এসভিজি ব্যবহার করে V তবে আমি মনে করি আপনি কোনও পৃথক ফাইলে এসভিজি লাগিয়ে পুরানো ব্রাউজারের সাহায্যে এই কাজটি করতে সক্ষম হবেন। আমি এখনও এই পদ্ধতির চেষ্টা করিনি।

এখানে স্নিপেট:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask1">
      <feFlood flood-color="#ff0000" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask1)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask2">
      <feFlood flood-color="#00ff00" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask2)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask3">
      <feFlood flood-color="#0000ff" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask3)" />
</svg>

Comments

ম্যান আপনি এই উত্তরে ডাকাতি করছেন। যে কোনও ফিল্টার ছাড়িয়ে চিত্রগুলি রঙিন করতে চেয়েছেন: হিউ-রোটেট করতে পারে - এটি করার উপায় এটি।

— ম্যাক্সপ্রেফার্টি

Answer 5

আইএমজি ট্যাগের অন্যান্য পদের মতো একটি পটভূমি সম্পত্তি রয়েছে। আপনার যদি স্টেনসিলের মতো স্বচ্ছ আকৃতির সাদা পিএনজি থাকে তবে আপনি এটি করতে পারেন:

<img src= 'stencil.png' style= 'background-color: red'>

Comments

আমি সাদা অংশটি আলাদাভাবে চাই, স্বচ্ছ অংশটি নয়।

— ওয়েসলি

আমি এখনও পর্যন্ত খুঁজে পেয়েছি সেরা সমাধান। খুব খারাপ, এটা শুধুমাত্র যদি আপনি আপনার ওয়েবসাইটের উপর একটি কঠিন পটভূমি-রঙ ব্যবহার কাজ করবে

— জুলে Colle,

@ ওয়েসলিকে আপনার তখন চিত্রটি উল্টাতে হবে (যাতে সাদা বিটটি স্বচ্ছ হয়ে যায় এবং বাকি সাদা হয়) যা আপনি আপনার প্রিয় চিত্র সম্পাদক এবং মুখোশ ব্যবহার করে করতে পারেন।

— চার্লস গুডউইন

@ চার্লস গুডউইন এটি কেবল তখনই কাজ করে তবে চিত্রটি একটি সাদা পটভূমিতে স্থাপন করা হবে।

— অ্যালেক্স

Answer 6

হ্যাঁ :)

সার্ফিন 'সাফারি - ব্লগ সংরক্ষণাগার »সিএসএস মুখোশ

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

-webkit-mask (background)
-webkit-mask-attachment (background-attachment)
-webkit-mask-clip (background-clip)
-webkit-mask-origin (background-origin)
-webkit-mask-image (background-image)
-webkit-mask-repeat (background-repeat)
-webkit-mask-composite (background-composite)
-webkit-mask-box-image (border-image)

Comments

ওয়েবকিটের সাথে সম্পর্কিত কোনও তথ্য আমি খুঁজে পাইনি বা এটি কি কেবল অ্যাপল-গন্ধ? মনে হচ্ছে যে W3 যেমন usecases জন্য করা SVG পরামর্শ হয়: w3.org/TR/SVG/masking.html

— feeela

দুঃখজনকভাবে এটি কেবল ওয়েবকিট বলে মনে হয় এবং ব্লগটি প্রকৃত উদাহরণগুলির চেয়ে কমপোজেট চিত্র ব্যবহার করে চিট করে। এই উত্তরটি হ'ল রেড হেরিং।

— চার্লস গুডউইন

Answer 7

ইন অধিকাংশ ব্রাউজার , আপনি ফিল্টার ব্যবহার করতে পারেন:

• উভয় <img>উপাদান এবং অন্যান্য উপাদান ব্যাকগ্রাউন্ড চিত্র

• এবং সেগুলিকে হয় আপনার সিএসএসে স্থিতিভাবে সেট করুন, অথবা জাভাস্ক্রিপ্ট ব্যবহার করে গতিশীল

নীচে ডেমো দেখুন।

---

<img> উপাদান

আপনি এই কৌশলটি কোনও <img>উপাদানটিতে প্রয়োগ করতে পারেন :

#original, #changed {
    width: 45%;
    padding: 2.5%;
    float: left;
}

#changed {
    -webkit-filter : hue-rotate(180deg);
    filter : hue-rotate(180deg);
}

<img id="original" src="http://i.stack.imgur.com/rfar2.jpg" />

<img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />

পটভূমি চিত্র

আপনি এই কৌশলটি একটি পটভূমির চিত্রটিতে প্রয়োগ করতে পারেন:

#original, #changed {
    background: url('http://i.stack.imgur.com/kaKzj.jpg');
    background-size: cover;
    width: 30%;
    margin: 0 10% 0 10%;
    padding-bottom: 28%;
    float: left;
}

#changed {
    -webkit-filter : hue-rotate(180deg);
    filter : hue-rotate(180deg);
}

<div id="original"></div>

<div id="changed"></div>

জাভাস্ক্রিপ্ট

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

var element = document.getElementById("changed");
var filter = 'hue-rotate(120deg) saturate(2.4)';
element.style['-webkit-filter'] = filter;
element.style['filter'] = filter;

#original, #changed {
    margin: 0 10%;
    width: 30%;
    float: left;
    background: url('http://i.stack.imgur.com/856IQ.png');
    background-size: cover;
    padding-bottom: 25%;
}

<div id="original"></div>

<div id="changed"></div>

Comments

প্রশ্নটি ছিল একটি স্বচ্ছ পটভূমি সহ একটি সাদা চিত্র রঙিন করার বিষয়ে। hue-rotateসাদা উপর কাজ করে না।

— সিনিটেক

Answer 8

ভাবেন আমার কাছে এর একটি সমাধান রয়েছে যা একটি) আপনি ঠিক 5 বছর আগে যা খুঁজছিলেন এবং খ) এখানের অন্যান্য কোড বিকল্পগুলির চেয়ে কিছুটা সহজ।

যে কোনও সাদা পিএনজি (উদাহরণস্বরূপ, স্বচ্ছ পটভূমিতে সাদা আইকন) এর সাহায্যে, আপনি নির্বাচককে পুনরায় পুনর্বিবেচনার পরে যুক্ত করতে পারেন।

.icon {
    background: url(img/icon.png); /* Your icon */
    position: relative; /* Allows an absolute positioned psuedo element */
}

.icon::after{
    position: absolute; /* Positions psuedo element relative to .icon */
    width: 100%; /* Same dimensions as .icon */
    height: 100%;
    content: ""; /* Allows psuedo element to show */
    background: #EC008C; /* The color you want the icon to change to */
    mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
}

এই কোডেপেনটি দেখুন (হোভারের জন্য রঙের সোয়্যাপটি প্রয়োগ করা): http://codepen.io/chrscblls/pen/bwAXZO

Comments

আমি ছবিটি ইমগার বন্ধ করে দিয়ে পুনরায় প্রচার করেছি, এটি লোড করতে কিছু সমস্যা হচ্ছে।

— chrscblls

Chrome এর সর্বশেষতম সংস্করণে দেখে মনে হচ্ছে (স্বচ্ছ) পটভূমিটিও রঙিন হয়ে উঠছে। লিঙ্কযুক্ত উদাহরণে, যখন আমি ঘোরাফেরা করি, আমি কেবল একটি অস্বচ্ছ গোলাপী বর্গক্ষেত্র দেখি ... ফায়ারফক্সে ভাল কাজ করে।

— লজিডেলিক

লিঙ্কটি মারা গেছে

— স্টিভেন লু

Answer 9

আমার পক্ষে কাজ করা সবচেয়ে সহজ এক লাইন:

filter: opacity(0.5) drop-shadow(0 0 0 blue);

রঙ হালকা বা গাer় করতে আপনি 0 থেকে 1 পর্যন্ত অস্বচ্ছতা সামঞ্জস্য করতে পারেন।

Comments

খুশী হলাম। এটি এখানে অন্যান্য সমাধানগুলির সমস্ত সীমাবদ্ধতা এড়িয়ে চলে।

— সিডোনার

ড্রপ-

— শ্যাডোটিকে

জেনিয়াস সলিউশন, সিএসএসে কিছুটা অগোছালো দেখাচ্ছে, তবে একটি মন্তব্যের সাথে, এটি পুরোপুরি বোধগম্য। ধন্যবাদ!

— রিচার্ড কেমিকেল জেনারাল ডেন্টন

সঠিক রঙ পেতে কাজ করবে না, এটি সবসময় মূল রঙ এবং নতুন রঙের মধ্যে কিছুটা মিশ্রণ।

— সুইসউইস

এই পদ্ধতির চিত্রটি কিছুটা বিকৃত করে এবং প্রতিবার ড্রপ-শ্যাডো প্রয়োগ করা হলে এটি আরও খারাপ হয়। অনুলিপি করার মতো ফলাফলগুলিও আসল থেকে আলাদা।

— স্মাগ

Answer 10

গুগল করার সময় আমি এটি পেয়েছি, আমি আমার পক্ষে সবচেয়ে ভাল কাজ করতে পেলাম ...

এইচটিএমএল

<div class="img"></div>

সিএসএস

.img {
  background-color: red;
  width: 60px;
  height: 60px;
   -webkit-mask-image: url('http://i.stack.imgur.com/gZvK4.png');
}

http://jsfiddle.net/a63b0exm/

Comments

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

— ড্যানিয়েল

ওহ, আমি সত্যিই সেগুলি চেষ্টা করে দেখিনি ... নীচের লিঙ্কটি চেষ্টা করুন। বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস / ডকস

Answer 11

আমার একটি নির্দিষ্ট রঙ প্রয়োজন, তাই ফিল্টার আমার পক্ষে কাজ করে না।

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

.colored-image {
        background-image: linear-gradient(to right, #BADA55, #BADA55), url("https://i.imgur.com/lYXT8R6.png");
        background-blend-mode: overlay;
        background-size: contain;
        width: 200px;
        height: 200px;        
    }

<div class="colored-image"></div>

Comments

আমার পক্ষে কাজ করেনি। আমি কেন বলতে পারি না, আমি ঠিক পেস্ট করেছি অনুলিপি

— ভিক সিডোব্লেইউ

@ ভিসি সিডুবলিয়েউ স্নিপেটটি ভাল কাজ করে। আপনার সিএসএস আসলে প্রয়োগ হচ্ছে তা নিশ্চিত করতে ডেভ সরঞ্জামগুলি ব্যবহার করে আপনার ডিভিটি পরীক্ষা করুন। এছাড়াও, নিশ্চিত করুন যে আপনার চিত্রের URL টি যদি আপনি প্রদত্ত একটি ব্যবহার না করেন তবে তা বৈধ কিনা। সম্পাদনা: স্নিপেটটি যদি আপনার পক্ষে কাজ না করে, আপনি সম্ভবত এমন একটি ব্রাউজার ব্যবহার করছেন যা হয় পুরানো বা লিনিয়ার-গ্রেডিয়েন্ট ফাংশন সমর্থন করে না।

— রোলজনজ

Answer 12

উত্তর দেওয়া হচ্ছে কারণ আমি এর জন্য একটি সমাধান খুঁজছিলাম।

@ chrscblls উত্তরের কলমটি যদি আপনার সাদা বা কালো পটভূমি থাকে তবে ভাল কাজ করে তবে আমার ছিল না। এছাড়াও, ইমেজগুলি এনজি-রিপিট দিয়ে তৈরি করা হয়েছিল, সুতরাং আমি আমার সিএসএসে তাদের ইউআরএল রাখতে পারিনি এবং আপনি ইমগ ট্যাগ পরে :: ব্যবহার করতে পারবেন না।

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

সুতরাং আমি যা করেছি তা তিনটি মূল পার্থক্য সহ বেশ একই রকম:

• ইউআরএলটি আমার আইএমজি ট্যাগে থাকা অবস্থায়, আমি এটিকে (এবং একটি লেবেল) অন্য একটি ডিভে রেখেছি যার উপরে :: পরে কাজ করবে।
• 'মিশ্রণ-মিশ্রণ-মোড' 'গুণ' বা 'স্ক্রিন' এর পরিবর্তে 'পার্থক্য' এ সেট করা হয়।
• আমি ঠিক আগে একই মান সহ একটি :: যুক্ত করেছি সুতরাং :: এর পরে :: দ্বারা তৈরি করা 'পার্থক্য' এর 'পার্থক্য' করবে এবং এটি স্ব-বাতিল করে দেবে।

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

.divClass{
   position: relative;
   width: 100%;
   height: 100%;
   text-align: left;
}
.divClass:hover::after, .divClass:hover::before{
   position: absolute;
   width: 100%;
   height: 100%;
   background: #FFF;
   mix-blend-mode: difference;
   content: "";
}

https://codepen.io/spaceplant/pen/oZyMYG

Answer 13

আপনার যদি কেবল একটি আইকন প্রয়োজন হয় তবে সম্পূর্ণ ফন্ট সেট করার দরকার নেই, এবং আমি পৃথক উপাদান হিসাবে এটি আরও "পরিষ্কার" বোধ করি। সুতরাং, এই উদ্দেশ্যে, HTML5 এ আপনি ডকুমেন্ট প্রবাহের ভিতরে সরাসরি একটি এসভিজি রাখতে পারেন। তারপরে আপনি আপনার .CSS স্টাইলশিটে কোনও শ্রেণি সংজ্ঞায়িত করতে পারেন এবং এর ব্যাকগ্রাউন্ড রঙটি এর সাথে অ্যাক্সেস করতে পারেনfill সম্পত্তি :

ওয়ার্কিং ফিডল: http://jsfiddle.net/qmsj0ez1/

মনে রাখবেন, উদাহরণস্বরূপ, আমি :hoverআচরণটি বর্ণনা করার জন্য ব্যবহার করেছি ; আপনি যদি কেবল "স্বাভাবিক" অবস্থার জন্য রঙ পরিবর্তন করতে চান তবে আপনার সিউডোক্লাসটি অপসারণ করা উচিত।

Answer 14

আক্ষরিক রঙ পরিবর্তন করতে, আপনি একটি ওয়েবেকিট-ফিল্টার দিয়ে একটি সিএসএস রূপান্তর অন্তর্ভুক্ত করতে পারেন যেখানে যখন কিছু ঘটে তখন আপনি আপনার পছন্দের-ওয়েবেকিট-ফিল্টারটি ডাকবেন। উদাহরণ স্বরূপ:

img {
    -webkit-filter:grayscale(0%);
    transition: -webkit-filter .3s linear;
    }
img:hover 
    {
    -webkit-filter:grayscale(75%);
    }

Answer 15

কালো থেকে সাদা, বা সাদা থেকে কালোতে কোনও ছবি পরিবর্তন করার সময় হিউ ​​রোটেট ফিল্টারটি কাজ করে না, কারণ কালো এবং সাদা প্রযুক্তিগতভাবে রঙ নয়। পরিবর্তে, কালো এবং সাদা বর্ণের পরিবর্তনগুলি (কালো থেকে সাদা বা তদ্বিপরীত থেকে) উল্টানো ফিল্টার সম্পত্তি সহ করতে হবে।

.img1 { filter: invert(100%); }

Answer 16

body{
  background: #333 url(/images/classy_fabric.png);
  width: 430px;
  margin: 0 auto;
  padding: 30px;
}
.preview{
  background: #ccc;
  width: 415px;
  height: 430px;
  border: solid 10px #fff;
}

input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 25px;
  height: 25px;
  margin: 5px 0 5px 5px;
  background-size: 225px 70px;
  position: relative;
  float: left;
  display: inline;
  top: 0;
  border-radius: 3px;
  z-index: 99999;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000;
}

input[type='radio']:hover{
  -webkit-filter: opacity(.4);
  filter: opacity(.4);    
}

.red{
  background: red;
}

.red:checked{
  background: linear-gradient(brown, red)
}

.green{
  background: green;
}

.green:checked{
  background: linear-gradient(green, lime);
}

.yellow{
  background: yellow;
}

.yellow:checked{
  background: linear-gradient(orange, yellow);
}

.purple{
  background: purple;
}

.pink{
  background: pink;
}

.purple:checked{
  background: linear-gradient(purple, violet);
}

.red:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 red);
  filter: opacity(.5) drop-shadow(0 0 0 red);
}

.green:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 green);
  filter: opacity(.5) drop-shadow(0 0 0 green);
}

.yellow:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);
  filter: opacity(.5) drop-shadow(0 0 0 yellow);
}

.purple:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 purple);
  filter: opacity(.5) drop-shadow(0 0 0 purple);
}

.pink:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 pink);
  filter: opacity(.5) drop-shadow(0 0 0 pink);
}


img{
  width: 394px;
  height: 375px;
  position: relative;
}

.label{
  width: 150px;
  height: 75px;
  position: absolute;
  top: 170px;
  margin-left: 130px;
}

::selection{
  background: #000;
}

<div class="preview">
  <input class='red' name='color' type='radio' />
  <input class='green' name='color' type='radio' />
    <input class='pink' name='color' type='radio' />
  <input checked class='yellow' name='color' type='radio' />
  <input class='purple' name='color' type='radio' />  
  <img src="https://i.stack.imgur.com/bd7VJ.png"/>
</div>

সূত্র: https://codepen.io/taryaoui/pen/EKkcu