Apa cara terbaik (jika ada) untuk membuat gambar tampak "abu-abu" dengan CSS (yaitu, tanpa memuat versi gambar yang terpisah dan berwarna abu-abu)?

Konteks saya adalah bahwa saya memiliki baris dalam tabel yang semuanya memiliki tombol di sel paling kanan dan beberapa baris perlu terlihat lebih ringan daripada yang lain. Jadi saya dapat membuat font lebih ringan tentu saja tetapi saya juga ingin membuat gambar lebih ringan tanpa harus mengelola dua versi setiap gambar.

Apakah itu harus abu-abu? Anda bisa mengatur opacity dari gambar lebih rendah (untuk menumpulkannya). Atau, Anda dapat membuat a<div> overlay dan mengaturnya menjadi abu-abu (ubah alfa untuk mendapatkan efek).

• 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;
  }

Gunakan properti filter CSS3:

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

Dukungan browser agak buruk tetapi 100% CSS. Artikel bagus tentang properti filter CSS3 dapat Anda temukan di sini: http://blog.nmsdvid.com/css-filter-property/

Kamu disini:

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

Belum ditampilkan:

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

Saya menemukannya di: http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao

Sunting: IE10 + tidak mendukung filter DX seperti yang dilakukan IE9 dan sebelumnya, juga tidak mendukung versi sebelumnya dari filter abu-abu. Anda dapat memperbaikinya, gunakan satu dari dua solusi di bawah ini:

1. Setel IE10 + untuk di-render menggunakan mode standar IE9 menggunakan elemen meta berikut di kepala: <meta http-equiv="X-UA-Compatible" content="IE=9">
2. Gunakan overlay SVG di IE10 untuk menyelesaikan penjelajah internet greyscaling 10 - bagaimana menerapkan filter grayscale?

Jika Anda tidak keberatan menggunakan sedikit JavaScript, fadeTo () jQuery berfungsi dengan baik di setiap browser yang saya coba.

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

Lebih baik mendukung semua browser:

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

Berikut ini contoh yang memungkinkan Anda mengatur warna latar belakang. Jika Anda tidak ingin menggunakan float, maka Anda mungkin perlu mengatur lebar dan tinggi secara manual. Tetapi itu pun sangat tergantung pada CSS / HTML di sekitarnya.

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

Menjadi abu-abu:

"Untuk mencapai achromatize."

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>

"Mengisi dengan abu-abu."

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>

Catatan yang bermanfaat

• Apa perbedaan antara grayscale dan saturate filter CSS3?

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

Anda dapat menggunakan rgba()css untuk menentukan warna, bukan rgb(). Seperti ini: style='background-color: rgba(128,128,128, 0.7);

Memberimu warna yang sama dengan rgb(128,128,128) tetapi dengan opacity 70% sehingga barang-barang di belakang hanya menunjukkan melalui 30%. Tapi CSS3 berfungsi di sebagian besar browser sejak 2008. Maaf, tidak ada sintaks #rrggbb yang saya ketahui. Bermainlah dengan angka - Anda bisa mencuci dengan putih, bayangan dengan abu-abu, apa pun yang ingin Anda encerkan.

OK jadi Anda membuat persegi panjang abu-abu semi-transparan (atau warna apa pun) dan meletakkannya di atas gambar Anda, mungkin dengan posisi: absolut dan indeks-z lebih tinggi dari nol, dan Anda meletakkannya tepat sebelum gambar dan default lokasi untuk persegi panjang akan menjadi sudut kiri atas gambar Anda. Harus bekerja

Menimbang filter: ekspresi adalah ekstensi Microsoft ke CSS, jadi itu hanya akan berfungsi di Internet Explorer. Jika Anda ingin menghapusnya, saya sarankan Anda mengatur opacity menjadi 50% menggunakan sedikit javascript.

http://lyxus.net/mv akan menjadi tempat yang baik untuk memulai, karena membahas skrip opacity yang berfungsi dengan Firefox, Safari, KHTML, Internet Explorer, dan browser yang mendukung CSS3.

Anda mungkin juga ingin memberinya batas abu-abu.