แปลงภาพเป็นสีเทาใน HTML / CSS

มีวิธีง่าย ๆ ในการแสดงบิตแมปสีในระดับสีเทาด้วยHTML/CSSหรือไม่

ไม่จำเป็นต้องเข้ากันได้กับ IE (และฉันคิดว่ามันจะไม่เป็นอย่างนั้น) - ถ้ามันทำงานใน FF3 และ / หรือ Sf3 นั่นก็ดีพอสำหรับฉัน

ฉันรู้ว่าฉันสามารถทำได้ทั้งกับSVGCanvas และตอนนี้ดูเหมือนว่าจะมีงานเยอะมาก

มีวิธีที่คนขี้เกียจอย่างแท้จริงในการทำเช่นนี้?

การสนับสนุนตัวกรอง CSS มีที่ดินใน Webkit ตอนนี้เราจึงมีโซลูชันข้ามเบราว์เซอร์

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/">

แล้ว Internet Explorer 10 ล่ะ

คุณสามารถใช้ polyfill เช่นสีเทา

ต่อจากคำตอบของ brillout.comและยังตอบโรมัน Nurik ของและผ่อนคลายบ้างความต้องการที่ไม่มี SVG 'คุณสามารถ desaturate ภาพใน Firefox โดยใช้เพียงไฟล์ SVG เดียวและ CSS บาง

ไฟล์ 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>

บันทึกว่าเป็น resources.svg ซึ่งสามารถนำมาใช้ใหม่ได้ในตอนนี้สำหรับรูปภาพใด ๆ ที่คุณต้องการเปลี่ยนเป็น greyscale

ใน CSS ของคุณคุณอ้างอิงตัวกรองโดยใช้filterคุณสมบัติเฉพาะของ Firefox :

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

เพิ่ม MS คนที่เป็นกรรมสิทธิ์เกินไปถ้าคุณรู้สึกเหมือนว่ามันจะนำไปใช้ในชั้นเรียนว่าภาพใด ๆ ที่คุณต้องการแปลงเป็นเฉดสีเทา (ทำงานใน Firefox> 3.5, IE8)

แก้ไข : นี่คือบล็อกโพสต์ที่ดีซึ่งอธิบายการใช้filterคุณสมบัติCSS3 ใหม่ในคำตอบของ SalmanPK ในคอนเสิร์ตด้วยแนวทาง SVG ที่อธิบายไว้ที่นี่ เมื่อใช้วิธีการดังกล่าวคุณจะพบกับสิ่งต่อไปนี้:

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 */
}

ข้อมูลการสนับสนุนเบราว์เซอร์เพิ่มเติมที่นี่

สำหรับ Firefox ที่คุณไม่จำเป็นต้องสร้างไฟล์ filter.svg คุณสามารถใช้รูปแบบข้อมูล URI

รับรหัส 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" ด้วยการเข้ารหัสไฟล์ของคุณ

วิธีนี้ควรเร็วกว่าวิธีอื่นเนื่องจากเบราว์เซอร์ไม่จำเป็นต้องทำคำขอ HTTP อันที่สอง

อัปเดต:ฉันทำสิ่งนี้ให้เป็น repo GitHub เต็มรูปแบบรวมถึง JavaScript polyfill สำหรับ IE10 และ IE11: https://github.com/karlhorky/gray

ฉันเดิมใช้คำตอบของ SalmanPKแต่แล้วสร้างรูปแบบด้านล่างเพื่อกำจัดคำขอ HTTP พิเศษที่จำเป็นสำหรับไฟล์ SVG SVG แบบอินไลน์ทำงานใน Firefox เวอร์ชัน 10 ขึ้นไปและรุ่นที่ต่ำกว่า 10 จะไม่สามารถใช้งานได้แม้แต่ 1% ของตลาดเบราว์เซอร์ทั่วโลก

ฉันได้ปรับปรุงวิธีแก้ไขปัญหาในโพสต์บล็อกนี้เพิ่มการสนับสนุนสำหรับการซีดจางกลับสีสนับสนุน IE 10/11 กับ SVG และสีเทาบางส่วนในการสาธิต

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%);
}

หากคุณสามารถใช้ JavaScript สคริปต์นี้อาจเป็นสิ่งที่คุณกำลังมองหา มันทำงานข้ามเบราว์เซอร์และทำงานได้ดีสำหรับฉันจนถึงตอนนี้ คุณไม่สามารถใช้กับรูปภาพที่โหลดจากโดเมนอื่น

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

เพิ่งมีปัญหาเดียวกันวันนี้ ฉันเริ่มใช้SalmanPK solutionแต่พบว่าผลกระทบนั้นแตกต่างกันระหว่าง FF และเบราว์เซอร์อื่น ๆ นั่นเป็นเพราะเมทริกซ์การแปลงทำงานบนความสว่างไม่เพียง แต่ความส่องสว่างเหมือนตัวกรองใน Chrome / IE ด้วยความประหลาดใจของฉันฉันพบว่าโซลูชันทางเลือกและง่ายกว่าใน SVG ยังทำงานใน FF4 + และให้ผลลัพธ์ที่ดีกว่า:

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

ด้วย CSS:

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

ข้อแม้อีกข้อหนึ่งคือ IE10 ไม่รองรับ "ตัวกรอง: สีเทา:" ในโหมดที่ได้มาตรฐานอีกต่อไปดังนั้นจึงต้องสลับโหมดความเข้ากันได้ในส่วนหัวเพื่อให้ทำงานได้:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

วิธีที่ง่ายที่สุดในการบรรลุระดับสีเทาด้วย CSS เฉพาะคือผ่านfilterคุณสมบัติ

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

คุณสมบัติยังคงไม่รองรับอย่างสมบูรณ์และยังต้องการ-webkit-filterคุณสมบัติสำหรับการสนับสนุนในเบราว์เซอร์ทั้งหมด

ดูเหมือนจะเป็นไปไม่ได้ (ยัง) แม้จะมี CSS3 หรือเป็นกรรมสิทธิ์-webkit-หรือ-moz-คุณสมบัติ CSS

อย่างไรก็ตามฉันพบโพสต์นี้เมื่อเดือนมิถุนายนที่ผ่านมาซึ่งใช้ตัวกรอง SVG ใน HTML ไม่พร้อมใช้งานในเบราว์เซอร์ใด ๆ ในปัจจุบัน (ตัวอย่างที่บอกเป็นนัยในการสร้าง WebKit แบบกำหนดเอง) แต่น่าประทับใจมากในการพิสูจน์แนวคิด

สำหรับผู้ที่ถามเกี่ยวกับการสนับสนุน IE10 + ที่ไม่สนใจในคำตอบอื่น ๆ ให้ชำระเงิน CSS ของชิ้นนี้:

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>

สำหรับการสาธิตเพิ่มเติมเช็คเอาต์ส่วน CSS3 Graphicsของ IE testdrive และบล็อก IE เก่านี้http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

ใน Internet Explorer ให้ใช้คุณสมบัติตัวกรอง

ใน webkit และ Firefox ในขณะนี้ยังไม่มีวิธีในการแยกแยะรูปภาพด้วย CSS เท่านั้น ดังนั้นคุณจะต้องใช้ canvas หรือ SVG สำหรับโซลูชันฝั่งไคลเอ็นต์

แต่ฉันคิดว่าการใช้ SVG นั้นดีกว่ามาก ลองดูโพสต์บล็อกของฉันสำหรับโซลูชัน SVG ที่ใช้ได้กับทั้ง Firefox และ webkit: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

และการพูดอย่างเคร่งครัดเนื่องจาก SVG เป็น HTML การแก้ปัญหาคือ html + css: pure

วิธีการใหม่ในการทำเช่นนี้มีให้บริการในบางเวลาบนเบราว์เซอร์ที่ทันสมัย

พื้นหลังผสมผสานโหมดช่วยให้คุณได้รับผลกระทบที่น่าสนใจและหนึ่งในนั้นคือการแปลงสีเทา

ค่าความส่องสว่างตั้งอยู่บนพื้นหลังสีขาวอนุญาต (เลื่อนเพื่อดูเป็นสีเทา)

.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>

การอ้างอิง

เมทริกซ์ความเข้ากันได้

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

บางทีวิธีนี้จะช่วยคุณได้

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

w3schools.org

อันที่จริงแล้วมันง่ายที่จะทำกับ IE ถ้าฉันจำได้อย่างถูกต้องโดยใช้คุณสมบัติ CSS ที่เป็นกรรมสิทธิ์ ลองสิ่งนี้FILTER: Grayจากhttp://www.ssi-developer.net/css/visual-filters.shtml

วิธีการของAxeทำให้ภาพมีความโปร่งใสและมีพื้นหลังสีดำอยู่ด้านหลัง ฉันแน่ใจว่าคุณสามารถโต้แย้งได้ว่ามันเป็นสีเทา

แม้ว่าคุณจะไม่ต้องการใช้ Javascript แต่ฉันคิดว่าคุณจะต้องใช้มัน คุณสามารถใช้ภาษาฝั่งเซิร์ฟเวอร์เพื่อทำมันได้

หากคุณยินดีที่จะใช้ Javascript คุณสามารถใช้ Canvas ในการแปลงภาพเป็นสีเทา ตั้งแต่การรองรับ Firefox และ Safari <canvas>มันควรจะทำงาน

ดังนั้นฉันจึงไปที่ "ผ้าใบสีเทา" และผลลัพธ์แรกคือhttp://www.permadi.com/tutorial/jsCanvasGrayscale/index.htmlซึ่งดูเหมือนว่าจะใช้งานได้

มีการเพิ่มการรองรับตัวกรอง CSS ดั้งเดิมใน webkit จากเวอร์ชันปัจจุบัน 19.0.1084.46

ดังนั้น -webkit-filter: โทนสีเทา (1) จะทำงานและวิธีใดที่ง่ายกว่า SVG สำหรับ webkit ...

นี่คือมิกซ์อินสำหรับ LESS ที่จะให้คุณเลือกความทึบ เติมตัวแปรด้วยตัวคุณเองสำหรับ CSS ธรรมดาด้วยเปอร์เซ็นต์ที่แตกต่างกัน

คำใบ้ที่นี่มันใช้ชนิดอิ่มตัวสำหรับเมทริกซ์ดังนั้นคุณไม่จำเป็นต้องทำอะไรแฟนซีเพื่อเปลี่ยนเปอร์เซ็นต์

.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);
    }
}

คุณไม่จำเป็นต้องใช้คำนำหน้ามากมายสำหรับการใช้งานเต็มรูปแบบเพราะถ้าคุณเลือกคำนำหน้าสำหรับ firefox เก่าคุณไม่จำเป็นต้องใช้คำนำหน้าสำหรับ firefox ใหม่

ดังนั้นสำหรับการใช้งานเต็มรูปแบบให้ใช้รหัสนี้:

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%);
}

ในฐานะที่เป็นส่วนเติมเต็มให้กับคำตอบของผู้อื่นมันเป็นไปได้ที่จะทำให้ภาพดูครึ่งทางบน FF โดยไม่ต้องปวดหัวของเมทริกซ์ SVG :

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

อยู่$vระหว่าง0และ1. filter:grayscale(50%);มันเทียบเท่ากับ

ตัวอย่างสด:

.desaturate {
    filter: url("#desaturate");
    -webkit-filter: grayscale(50%);
}
figcaption{
    background: rgba(55, 55, 136, 1);
    padding: 4px 98px 0 18px;
    color: white;
    display: inline-block;
    border-top-left-radius: 8px;
    border-top-right-radius: 100%;
    font-family: "Helvetica";
}

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

<figure>
  <figcaption>Original</figcaption>
  <img src="http://www.placecage.com/c/500/200"/>
  </figure>
<figure>
  <figcaption>Half grayed</figcaption>
  <img class="desaturate" src="http://www.placecage.com/c/500/200"/>
</figure>

อ้างอิง MDN

ตามคำตอบของ robertc :

ในการรับการแปลงที่เหมาะสมจากภาพสีเป็นภาพระดับสีเทาแทนที่จะใช้เมทริกซ์ดังนี้:

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

สิ่งนี้จะทำงานได้ดีสำหรับรูปภาพทุกประเภทที่ใช้โมเดล RGBA (แดง - เขียว - น้ำเงิน - อัลฟ่า)

สำหรับข้อมูลเพิ่มเติมว่าทำไมคุณควรใช้เมทริกซ์ฉันโพสต์มีโอกาสมากขึ้นที่โรเบิร์ตหนึ่งตรวจสอบลิงค์ต่อไปนี้:

• สัญญาณความแตกต่างของความสว่างและสี
• คำตอบสำหรับคำถามของ Margus: "greyscalevalue ใน colorvalue" @stackoverflow ส่วนหนึ่ง: แก้ไข 2: @Hans Passant
• Charles A. Bouman - มหาวิทยาลัย Purdue - ทีวีแอนะล็อกหน้า 20 & 21
• และที่นี่คุณจะพบรหัส C # และ VB บางส่วน

ทางออกหนึ่งที่น่ากลัว แต่ใช้การได้: แสดงภาพโดยใช้วัตถุแฟลชซึ่งจะให้การแปลงทั้งหมดที่เป็นไปได้ใน Flash

หากผู้ใช้ของคุณกำลังใช้เบราว์เซอร์แบบตกเลือดและถ้า Firefox 3.5 และ Safari 4 รองรับ (ฉันไม่ทราบว่าต้องทำ / จะทำเช่นนั้น) คุณสามารถปรับเปลี่ยนแอตทริบิวต์โปรไฟล์สี CSS ของภาพได้โดยตั้งเป็น ICC ระดับสีเทา URL โปรไฟล์ แต่นั่นเป็นจำนวนมากถ้าเป็น!

เป็นทางเลือกสำหรับเบราว์เซอร์รุ่นเก่าสามารถใช้รูปแบบการผลิตโดยองค์ประกอบปลอมหรือแท็กแบบอินไลน์

การวางตำแหน่งที่แน่นอนวางตัว img (หรือพื้นที่ข้อความที่ไม่จำเป็นต้องคลิกหรือเลือก) สามารถเลียนแบบเอฟเฟกต์สีได้อย่างใกล้ชิดผ่าน rgba () หรือ pngแปล

มันจะไม่ให้ระดับสีเดียว แต่จะเฉดสีออกจากช่วง

ทดสอบปากการหัสที่มี 10 สีที่แตกต่างกันผ่านทางองค์ประกอบหลอกสุดท้ายคือสีเทา http://codepen.io/gcyrillus/pen/nqpDd (โหลดซ้ำเพื่อเปลี่ยนเป็นภาพอื่น)

คุณสามารถใช้หนึ่งในฟังก์ชันของ jFunc - ใช้ฟังก์ชัน "jFunc_CanvasFilterGrayscale" http://jfunc.com/jFunc-functions.aspx

ลองปลั๊กอิน jquery นี้ แม้ว่านี่จะไม่ใช่โซลูชัน HTML และ CSS ล้วนๆ แต่เป็นวิธีการสันหลังยาวในการบรรลุสิ่งที่คุณต้องการ คุณสามารถปรับแต่ง greyscale ของคุณเพื่อให้เหมาะกับการใช้งานของคุณมากที่สุด ใช้มันดังต่อไปนี้:

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

มีการโต้ตอบเป็นสาธิต คุณสามารถเล่นกับมัน

ตรวจสอบเอกสารเกี่ยวกับการใช้งานมันค่อนข้างง่าย เอกสาร

สำหรับระดับสีเทาเป็นเปอร์เซ็นต์ใน Firefox ให้ใช้ตัวกรองอิ่มตัวแทน: (ค้นหา 'saturate')

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"

หากคุณหรือคนอื่นประสบปัญหาที่คล้ายกันในอนาคตเปิดให้ PHP (ฉันรู้ว่าคุณพูด HTML / CSS แต่บางทีคุณกำลังใช้ PHP ในแบ็กเอนด์) นี่คือทางออกของ PHP:

ฉันได้รับจากห้องสมุด PHP GD และเพิ่มตัวแปรบางอย่างเพื่อให้กระบวนการ ...

<?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);

?>