Wyszarzają obraz za pomocą CSS?

Question

Jaki jest najlepszy (jeśli w ogóle) sposób, aby obraz był "wyszarzony" za pomocą CSS (tj. Bez załadowania oddzielnej, wyszarzonej wersji obrazu)?

Mój kontekst polega na tym, że mam wiersze w tabeli, które mają przyciski w prawej komórce, a niektóre wiersze muszą wyglądać jaśniej niż inne. Mogę więc oczywiście łatwiej zmienić czcionkę, ale chciałbym też, aby obrazy były lżejsze bez konieczności zarządzania dwiema wersjami każdego obrazu.

Answer 1

Czy to musi być szare? Można po prostu ustawić mniejszą krycie obrazu (aby go przyciemnić). Alternatywnie możesz utworzyć nakładkę <div> i ustawić, aby była szara (zmień wartość alfa, aby uzyskać efekt).

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

Answer 2

Oto przykład, który pozwala ci ustawić kolor tła. Jeśli nie chcesz używać funkcji float, konieczne może być ręczne ustawienie szerokości i wysokości. Ale nawet to naprawdę zależy od otaczającego 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> 

Answer 3

Uwzględniając filtr: wyrażenie jest rozszerzeniem Microsoft do CSS, więc będzie działać tylko w przeglądarce Internet Explorer. Jeśli chcesz go wyszarzyć, zaleciłbym ustawić jego przezroczystość na 50% przy użyciu odrobiny javascript.

http://lyxus.net/mv byłby dobrym miejscem do rozpoczęcia, ponieważ omawia skrypt nieprzezroczystości , który działa z przeglądarkami obsługującymi przeglądarki Firefox, Safari, KHTML, Internet Explorer i CSS3.

Możesz również chcieć nadać mu szare obramowanie.

Answer 4

Lepiej wspierać wszystkie przeglądarek:

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

Answer 5

Jeśli nie przeszkadza trochę JavaScript, jQuery za fadeTo() działa dobrze w każdej przeglądarce próbowałem.

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

Answer 6

Można użyć rgba() w CSS, aby zdefiniować kolor zamiast rgb(). W ten sposób: style='background-color: rgba(128,128,128, 0.7);

Daje ci ten sam kolor, co rgb(128,128,128), ale z kryciem 70%, więc materiał z tyłu pokazuje tylko 30%. CSS3, ale działa w większości przeglądarek od 2008. Przykro mi, nie znam składni #rrggbb. Graj z liczbami - możesz sprać z białym, cienia z szarym, cokolwiek chcesz rozcieńczyć.

OK, aby utworzyć prostokąt w półprzezroczystej szarej (lub innym kolorze) i ułożyć go na górze obrazu, może z pozycją: absolutną i z-index większą niż zero, i umieścić go tuż przed obraz i domyślna lokalizacja prostokąta będzie tym samym lewym górnym rogiem obrazu. Powinno działać.

Answer 7

Użyj właściwości filtra CSS3:

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

Wsparcie przeglądarka jest trochę zły, ale jest to 100% CSS. Miły artykuł o własności filtra CSS3 można znaleźć tutaj: http://blog.nmsdvid.com/css-filter-property/

Answer 8

Twój tutaj:

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

Css Szary:

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

znalazłem pod adresem: http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao

Edytuj: IE10 + nie obsługuje filtrów DX w wersji IE9 i wcześniejszych wersjach, ani nie obsługuje wstępnie ustawionej wersji filtru w skali szarości. Można go naprawić, użyj jednego z dwóch rozwiązań poniżej:

1. Set IE10 + renderowanie w trybie standardów IE9 stosując następujący meta elementu w głowę: <meta http-equiv="X-UA-Compatible" content="IE=9">
2. Zastosowanie nakładki SVG w IE10 aby osiągnąć greyscaling internet explorer 10 - howto apply grayscale filter?