Bir görüntünün CSS ile "grileşmiş" görünmesini sağlamanın en iyi yolu (varsa) (örneğin, görüntünün ayrı, gri renkli bir sürümünü yüklemeden) nedir?

Bağlamım, bir tabloda, en sağdaki hücrede düğmeler olan satırlara sahip olmam ve bazı satırların diğerlerinden daha hafif görünmesi gerektiğidir. Bu yüzden yazı tipini kolayca daha açık hale getirebilirim, ancak her görüntünün iki sürümünü yönetmek zorunda kalmadan resimleri daha açık hale getirmek istiyorum.

Gri olması gerekir mi? Görüntünün opaklığını daha düşük olarak ayarlayabilirsiniz (donuklaştırmak için). Alternatif olarak, bir <div>kaplama oluşturabilir ve bunu gri olarak ayarlayabilirsiniz (efekti elde etmek için alfa değerini değiştirin).

• 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 filtre özelliğini kullanın:

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

Tarayıcı desteği biraz kötü ama% 100 CSS. CSS3 filtre özelliği hakkında güzel bir makale burada bulabilirsiniz: http://blog.nmsdvid.com/css-filter-property/

Buradasınız:

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

Css Gri:

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

Şurada buldum: http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao

Düzenleme: IE10 +, IE9 ve öncesi gibi DX filtrelerini desteklemez ve gri tonlama filtresinin önekli sürümünü de desteklemez. Düzeltebilir, aşağıdaki iki çözümden birini kullanabilirsiniz:

1. IE10 + 'yı, baştaki aşağıdaki meta öğeyi kullanarak IE9 standart modunu kullanarak oluşturulacak şekilde ayarlayın: <meta http-equiv="X-UA-Compatible" content="IE=9">
2. Gri tonlamalı internet explorer 10'u gerçekleştirmek için IE10'da bir SVG yer paylaşımı kullanın - gri tonlamalı filtre nasıl uygulanır?

Biraz JavaScript kullanmayı düşünmezseniz , jQuery'nin fadeTo () yöntemi denediğim her tarayıcıda iyi çalışır.

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

Tüm tarayıcıları desteklemek daha iyidir:

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

İşte arka planın rengini ayarlamanıza izin veren bir örnek. Şamandıra kullanmak istemiyorsanız, genişliği ve yüksekliği manuel olarak ayarlamanız gerekebilir. Ancak bu bile çevredeki CSS / HTML'ye bağlıdır.

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

Gri renk almak için:

"Akromatize etmek."

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>

“Griyle doldurmak.”

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>

Yardımcı notlar

• CSS3 filtre gri tonlamalı ve doygun arasındaki fark nedir?

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

Bunun rgba()yerine bir renk tanımlamak için css içinde kullanabilirsiniz rgb(). Bunun gibi: style='background-color: rgba(128,128,128, 0.7);

Size aynı renk verir, rgb(128,128,128)ancak% 70 opaklıkla verir, böylece arkadaki şeyler sadece% 30'u gösterir. CSS3 ama 2008'den beri çoğu tarayıcıda çalıştı. Üzgünüm, bildiğim #rrggbb sözdizimi yok. Rakamlarla oynayın - beyazla yıkayabilir, gri ile gölgeleyebilirsiniz, ne sulandırmak isterseniz.

Tamam, böylece yarı saydam gri (veya herhangi bir renkte) bir dikdörtgen yapın ve görüntünüzün üstüne, belki konumuyla: mutlak ve z-endeksi sıfırdan daha yüksek bir yere koyun ve görüntünüzün ve varsayılanın hemen önüne koyun dikdörtgenin konumu, resminizin sol üst köşesiyle aynı olacaktır. Çalışmalı.

Filtre göz önüne alındığında: ifade, CSS için bir Microsoft uzantısıdır, bu nedenle yalnızca Internet Explorer'da çalışır. Gri yapmak istiyorsanız, biraz javascript kullanarak opaklığını% 50 olarak ayarlamanızı tavsiye ederim.

http://lyxus.net/mv başlamak için iyi bir yer olurdu, çünkü Firefox, Safari, KHTML, Internet Explorer ve CSS3 özellikli tarayıcılarla çalışan bir opaklık betiğini tartışıyor.

Ayrıca gri bir kenarlık vermek isteyebilirsiniz.