อะไรคือวิธีที่ดีที่สุด (ถ้ามี) ในการทำให้ภาพปรากฏเป็น "สีเทา" ด้วย CSS (เช่นโดยไม่ต้องโหลดรูปภาพที่เป็นสีเทาแบบแยกต่างหาก)

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

มันต้องเป็นสีเทาหรือไม่? คุณสามารถตั้งค่าความทึบของภาพให้ต่ำลงได้ หรือคุณสามารถสร้าง<div>ภาพซ้อนทับและตั้งให้เป็นสีเทา (เปลี่ยนอัลฟ่าเพื่อให้ได้เอฟเฟกต์)

• HTML:

  <div id="wrapper">
      <img id="myImage" src="something.jpg" />
  </div>

• CSS:

  #myImage {
      opacity: 0.4;
      filter: alpha(opacity=40); /* msie */
  }
  
  /* or */
  
  #wrapper {
      opacity: 0.4;
      filter: alpha(opacity=40); /* msie */
      background-color: #000;
  }

ใช้คุณสมบัติตัวกรอง CSS3:

img {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
         -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
            filter: grayscale(100%); 
}

การสนับสนุนเบราว์เซอร์ค่อนข้างแย่ แต่ก็เป็น CSS 100% บทความที่ดีเกี่ยวกับคุณสมบัติตัวกรอง CSS3 คุณสามารถดูได้ที่นี่: http://blog.nmsdvid.com/css-filter-property/

ของคุณที่นี่:

<a href="#"><img src="img.jpg" /></a>

Css Grey:

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

Ungray:

a:hover img{
    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: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: none ; /* IE6-9 */
    zoom:1; /* needed to trigger "hasLayout" in IE if no width or height is set */
    -webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    }

ฉันพบมันได้ที่: http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao

แก้ไข: IE10 + ไม่รองรับตัวกรอง DX เช่นเดียวกับ IE9 และก่อนหน้านี้ได้ทำไปแล้วและไม่รองรับตัวกรอง greyscale รุ่นที่ขึ้นต้น คุณสามารถแก้ไขได้ใช้หนึ่งในสองวิธีด้านล่าง:

1. ตั้งค่า IE10 + ให้แสดงผลโดยใช้โหมดมาตรฐาน IE9 โดยใช้องค์ประกอบเมตาต่อไปนี้ในส่วนหัว: <meta http-equiv="X-UA-Compatible" content="IE=9">
2. ใช้การซ้อนทับ SVG ใน IE10 เพื่อให้บรรลุ greyscaling internet explorer 10 - วิธีการใช้ตัวกรองสีเทา

หากคุณไม่สนใจการใช้ JavaScript เล็กน้อย jQuery's fadeTo () จะทำงานได้ดีในทุกเบราว์เซอร์ที่ฉันได้ลอง

jQuery(selector).fadeTo(speed, opacity);

ดีกว่าที่จะสนับสนุนเบราว์เซอร์ทั้งหมด:

img.lessOpacity {               
   opacity: 0.4;
   filter: alpha(opacity=40);
   zoom: 1;  /* needed to trigger "hasLayout" in IE if no width or height is set */ 
}

นี่คือตัวอย่างที่ให้คุณตั้งค่าสีของพื้นหลัง หากคุณไม่ต้องการใช้ float คุณอาจต้องตั้งค่าความกว้างและความสูงด้วยตนเอง แต่ถึงกระนั้นก็ขึ้นอยู่กับ CSS / HTML ที่อยู่รอบ ๆ

<style>
#color {
  background-color: red;
  float: left;
}#opacity    {
    opacity : 0.4;
    filter: alpha(opacity=40); 
}
</style>

<div id="color">
  <div id="opacity">
    <img src="image.jpg" />
  </div>
</div>

เป็นสีเทา:

“ เพื่อไม่ให้เจ็บปวด”

filter: grayscale(100%);

@keyframes achromatization {
	0% {}
	25% {}
	75% {filter: grayscale(100%);}
	100% {filter: grayscale(100%);}
}

p {
	font-size: 5em;
	color: yellow;
	animation: achromatization 2s ease-out infinite alternate;
}
p:first-of-type {
	background-color: dodgerblue;
}

<p>
	⚡ Bzzzt!
</p>
<p>
	⚡ Bzzzt!
</p>

“ เติมด้วยสีเทา”

filter: contrast(0%);

@keyframes gray-filling {
	0% {}
	25% {}
	50% {filter: contrast(0%);}
	60% {filter: contrast(0%);}
	70% {filter: contrast(0%) brightness(0%) invert(100%);}
	80% {filter: contrast(0%) brightness(0%) invert(100%);}
	90% {filter: contrast(0%) brightness(0%);}
	100% {filter: contrast(0%) brightness(0%);}
}

p {
	font-size: 5em;
	color: yellow;
	animation: gray-filling 5s ease-out infinite alternate;
}
p:first-of-type {
	background-color: dodgerblue;
}

<p>
	⚡ Bzzzt!
</p>
<p>
	⚡ Bzzzt!
</p>

บันทึกย่อที่เป็นประโยชน์

• ความแตกต่างระหว่างตัวกรอง CSS3 สีเทาและอิ่มตัวคืออะไร?

• https://www.w3.org/TR/filter-effects-1

คุณสามารถใช้rgba()ใน CSS rgb()เพื่อกำหนดสีแทน แบบนี้: style='background-color: rgba(128,128,128, 0.7);

ให้สีเดียวrgb(128,128,128)กับคุณ แต่มีความทึบ 70% ดังนั้นสิ่งที่อยู่ข้างหลังจะแสดงถึง 30% เท่านั้น CSS3 แต่ใช้ได้กับเบราว์เซอร์ส่วนใหญ่มาตั้งแต่ปี 2008 ขออภัยไม่มี #rrggbb ไวยากรณ์ที่ฉันรู้ เล่นกับตัวเลข - คุณสามารถล้างออกด้วยสีขาวเงาออกด้วยสีเทาสิ่งที่คุณต้องการเจือจางด้วย

ตกลงเพื่อให้คุณสร้างสี่เหลี่ยมสีเทากึ่งโปร่งใส (หรือสีใดก็ได้) แล้ววางไว้บนรูปภาพของคุณอาจมีตำแหน่ง: ค่าสัมบูรณ์และดัชนี z สูงกว่าศูนย์และคุณวางไว้ตรงหน้ารูปภาพและค่าเริ่มต้น ตำแหน่งของสี่เหลี่ยมผืนผ้าจะเป็นมุมบนซ้ายของรูปภาพของคุณ ควรทำงาน.

พิจารณาตัวกรอง: นิพจน์เป็นส่วนเสริมของ Microsoft กับ CSS ดังนั้นจะใช้งานได้ใน Internet Explorer เท่านั้น หากคุณต้องการทำให้เป็นสีเทาฉันขอแนะนำให้คุณตั้งค่าความทึบเป็น 50% โดยใช้จาวาสคริปต์

http://lyxus.net/mvจะเป็นจุดเริ่มต้นที่ดีเนื่องจากจะกล่าวถึงสคริปต์ความทึบซึ่งทำงานกับ Firefox, Safari, KHTML, Internet Explorer และ CSS3

คุณอาจต้องการให้ขอบสีเทา