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


619

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

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

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

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


14
"ไม่จำเป็นต้องเข้ากันได้กับ IE (และฉันคิดว่ามันจะไม่เป็นเช่นนั้น)" ?? IE กำลังเตรียมชุดตัวกรอง DX ตั้งแต่ปี 1997 (IE4) ซึ่งทำงานนี้ด้วย CSS เพียงอย่างเดียวและอีกมากมาย ตอนนี้พวกเขามีตัวกรอง DX ที่ลดลงใน IE10และปฏิบัติตามตัวกรอง SVG มาตรฐานอย่างเคร่งครัด คุณอาจต้องการดูที่นี้และการสาธิตนี้
Raven vulcan

8
@vulcanraven ไม่ใช่แค่ CSS เท่านั้น - ถ้าคุณปิดการใช้งานสคริปต์ใน IE ตัวกรองจะหยุดทำงาน
robertc

3
@robertc นั่นเป็นเรื่องถูก ในทางตรงกันข้ามถ้าคุณปิดการใช้งานจาวาสคริปต์ในเบราว์เซอร์ใด ๆ เกือบทุก RIA รวมถึง Stackoverflow จะหยุดทำงาน
Raven vulcan

2
เพียงใช้ CSS stackoverflow.com/questions/286275/gray-out-image-with-css// รับคำตอบจากคำถามนี้
Sakata Gintoki

คำตอบ:


728

การสนับสนุนตัวกรอง 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 เช่นสีเทา


1
@CamiloMartin ตัวกรอง CSS ได้รับการสนับสนุนโดย Chrome 18+ เท่านั้น
Salman von Abbas

2
อัปเดต: Google Chrome เวอร์ชันเสถียรล่าสุด (19) รองรับตัวกรอง CSS เย้! =)
Salman von Abbas

6
มีวิธีแก้ปัญหาสำหรับ Opera ไหม?
Rustam

23
ดังนั้นทางออกสำหรับ IE10 คืออะไร
Tom Auger

2
สำหรับลูกหลาน: @TomAuger คำถาม & คำตอบนี้มีคำแนะนำเฉพาะสำหรับ IE10
บาร์นีย์

127

ต่อจากคำตอบของ 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 */
}

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


6
ใน webkit คุณทำสิ่งนี้: -webkit-filter: grayscale(100%);จากนั้น: -webkit-filter: grayscale(0);เพื่อลบ
SeanJA

@SeanJA ขอบคุณสำหรับการอัปเดต WebKit เริ่มนำสิ่งนี้ไปใช้ในเดือนธันวาคม
robertc

ฉันเห็นมันใน chrome beta ทั้งบนแล็ปท็อป linux และ win7 ของฉัน ดูเหมือนว่ามันจะไม่ทำงานในโครเมี่ยมที่เสถียรใน linux (แต่แล้วอีกครั้งมันเป็นไปได้ที่เวอร์ชั่นของ linux จะอยู่ด้านหลังหน้าต่าง)
SeanJA

1
วิธีนี้ใช้ได้ดีสำหรับฉันใน Chrome แต่ไม่มีผลใน Safari ใน FF มันทำให้รูปภาพของฉันไม่ปรากฏจนกว่าจะเลื่อน
colmtuite

85

สำหรับ 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 อันที่สอง


3
เพียงบันทึกเพื่อบันทึกอาการปวดหัว: YUI Compressor ตัดช่องว่างใน URL ของข้อมูล ดังนั้นคุณอาจพิจารณาใช้ minifier อื่นหากคุณต้องการใช้โซลูชันนี้
Malte

6
@Malte หรืออาจแทนที่ช่องว่างด้วยสตริง "% 20"
mquandalle

@mquandalle น่าเสียดายที่ IE10 ไม่รองรับตัวกรอง: grey blogs.msdn.com/b/ie/archive/2011/12/07/ …
Jedi.za

1
บน Firefox สีเทาของฉันเบามาก มีวิธีใดที่จะเพิ่มความคมชัดหรือทำให้มืดลงเล็กน้อย? เบราว์เซอร์อื่น ๆ ดูดีมาก
square_eyes

27

อัปเดต:ฉันทำสิ่งนี้ให้เป็น 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%);
}

14

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

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


11

เพิ่งมีปัญหาเดียวกันวันนี้ ฉันเริ่มใช้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" />

2
ดูเหมือนจะเป็นทางออกที่ดีกว่าง่ายกว่า - จะดีถ้า SalmanPK และ mquandalle อัปเดตโซลูชันของพวกเขาเป็นอย่างนี้ เห็นได้ชัดว่าเมทริกซ์ที่พวกเขาใช้เสีย <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คุณสมบัติ

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

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


7

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

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


7

สำหรับผู้ที่ถามเกี่ยวกับการสนับสนุน 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


7

ใน 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


สวัสดี Brillout ฉันสังเกตเห็นว่าสีเทาของคุณล้มเหลวจริง ๆ ที่ซาฟารี ติดตามใด ๆ ขอบคุณ
หงส์

1
SVG ไม่ใช่ HTML มันเป็นสเป็คที่แตกต่างกันโดยสิ้นเชิง
Camilo Martin

@CamiloMartin นี่คือ SVG ใน HTML ข้อมูลจำเพาะ
robertc

1
@robertc การเชื่อมโยงที่เป็นเรื่องเกี่ยวกับการวาง SVG ใน HTML แต่นี่เป็นข้อมูลจำเพาะ SVGและนี่เป็นHTML ข้อมูลจำเพาะ ความจริงที่ว่าทั้งสองมีความคล้าย ๆ กัน (หรือเพื่อ XML) ไม่ได้หมายความว่าพวกเขาเป็นสิ่งเดียวกัน ...
Camilo มาร์ติน

1
แต่มันเชื่อมโยงไปยังข้อมูลจำเพาะ SVG ในการอ้างอิง ... มันไม่ได้กำหนด SVG เพียงแค่บอกว่าเบราว์เซอร์ควรแยกวิเคราะห์ มันเหมือนกับ Javascript หรือ CSS ในเรื่องนั้น
Camilo Martin

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>

การอ้างอิง

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


1
@Andy ฉันเริ่มคำตอบของฉันพูดในเบราว์เซอร์ที่ทันสมัย
vals

คุณจะใช้วิธีนี้ได้อย่างไรหากใช้imgแท็กสำหรับรูปภาพไม่ใช่background: url()
Mohammad Elbanna

1
@MohammadElbanna คุณจำเป็นต้องใช้โหมดผสมผสมผสานแทนโหมดพื้นหลังผสม
vals



3

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

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

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


ฉันไม่ได้มีกล่อง Windows ดังนั้นขอบคุณ แต่มันมีประโยชน์น้อยสำหรับฉัน
Ken

ในกรณีดังกล่าวคุณสามารถดูได้ด้วย Virtual Machine กับ IE ใช้วิธีของ ax หรือใช้ canvas ... โปรดทราบว่าการใช้สีเทาบนรูปภาพขนาดใหญ่ที่มี Canvas นั้นค่อนข้างน่าสนใจสำหรับเอ็นจิ้น Javascript
alex

7
filter: grayมีอยู่ใน Internet Explorer ตั้งแต่รุ่น 4 พวกเขาใช้เวลามากกับอึสำหรับผลิตภัณฑ์ของพวกเขา - ถูกต้อง! - แต่พวกเขาล่วงหน้ากับสิ่งนี้จริง ๆ
Pekka

2

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

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


2

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

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


2

นี่คือมิกซ์อินสำหรับ 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);
    }
}

2

คุณไม่จำเป็นต้องใช้คำนำหน้ามากมายสำหรับการใช้งานเต็มรูปแบบเพราะถ้าคุณเลือกคำนำหน้าสำหรับ 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%);
}

2

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

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

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

ตัวอย่างสด:

อ้างอิง MDN


1

ตามคำตอบของ 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 (แดง - เขียว - น้ำเงิน - อัลฟ่า)

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


ฉันเห็นด้วย 0.3333 ผิด 0.2126 0.7152 0.0722 0 0ดูเหมือนจะเท่ากับ<fecolormatrix type="saturate" values="0">
นีล

ลิงค์ไปยัง "และที่นี่คุณสามารถค้นหารหัส C # และ VB" ได้ที่เก็บถาวรอินเทอร์เน็ตที่นี่: web.archive.org/web/20110220101001/http://www.bobpowell.net/ …
thisgeek

ลิงก์ไปที่ "สัญญาณความสว่างและความแตกต่างของสี" ก็จะเสียหายเช่นกัน ฉันหาสิ่งทดแทนไม่พบ
thisgeek

0

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

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


0

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

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

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

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



0

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

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

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

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


0

สำหรับระดับสีเทาเป็นเปอร์เซ็นต์ใน 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"

-1

หากคุณหรือคนอื่นประสบปัญหาที่คล้ายกันในอนาคตเปิดให้ 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);

?>

4
@Tom ขึ้นอยู่กับคะแนนโหวตและรายการโปรดของคำถามเดิม OP ไม่ได้เป็นเพียงคนเดียวที่สงสัยว่าเป็นไปได้หรือไม่ แน่นอนว่าคำตอบนี้อาจทำให้งอกฎ แต่ฉันไม่เห็นจุดในการ downvoting คำตอบที่อาจเป็นประโยชน์กับคนจำนวนมาก
Michael Martin-Smucker

1
@ ทอมฉันแม้ว่ามันอาจจะไม่ใช่คำตอบที่ถูกต้อง แต่มันก็มีประโยชน์เพราะจริง ๆ แล้ว "แก้ปัญหา" ระดับสีเทาโดยไม่ต้อง "รบกวน" ของ javascript บางทีเขาอาจไม่ได้พิจารณาหรือรู้เกี่ยวกับ PHP GD ไม่มีอันตรายใด ๆ เกิดขึ้น @ mlms13 นั่นคือจุดที่แน่นอนขอบคุณ :)
Trufa

นั่นเป็นสิ่งที่ไม่ดีของฉัน "ความคิด" เกี่ยวกับผู้ใช้รายอื่นที่ได้รับประโยชน์จากโพสต์นี้หลุดออกจากใจของฉัน .. ขอโทษ @Trufa
เขย่า

3
นั่นช่วยฉันได้ฉันไปถูกทางหลังจากที่คนอื่นตายไปแล้ว ฉันพบว่าการใช้ "imagefilter ($ source, IMG_FILTER_GRAYSCALE);" ให้ผลลัพธ์ที่ดีกว่ามาก (PHP 5 เท่านั้น)
chrismacp

5
ลงคะแนนเนื่องจากเป็นหัวข้อที่เกือบหมดแล้ว การแบ่งภาพในฝั่งเซิร์ฟเวอร์นั้นแตกต่างจาก CSS / HTML อย่างสิ้นเชิง
Simon Steinberger
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.