ต่อจากคำตอบของ 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 */
}
ข้อมูลการสนับสนุนเบราว์เซอร์เพิ่มเติมที่นี่