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 그레이 :

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

회색 :

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 +는 IE9 및 이전 버전과 마찬가지로 DX 필터를 지원하지 않으며 그레이 스케일 필터의 접두사 버전을 지원하지 않습니다. 아래 두 가지 솔루션 중 하나를 사용하여 문제를 해결할 수 있습니다.

1. 헤드에서 다음 메타 요소를 사용하여 IE9 표준 모드를 ​​사용하여 렌더링하도록 IE10 +를 설정하십시오. <meta http-equiv="X-UA-Compatible" content="IE=9">
2. IE10에서 SVG 오버레이를 사용하여 그레이 스케일링 인터넷 익스플로러 10 을 달성하십시오 -그레이 스케일 필터를 적용하는 방법?

약간의 JavaScript를 사용하지 않아도 jQuery의 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 구문은 없습니다. 숫자와 함께 연주하십시오-희석하고 싶은 것은 무엇이든 흰색으로 씻고 회색으로 그림자를 낼 수 있습니다.

반투명 회색 (또는 모든 색상)으로 사각형을 만들고 이미지 위에 놓으십시오. 어쩌면 position : absolute 및 z-index가 0보다 높고 이미지와 기본값 바로 앞에 놓으십시오. 사각형의 위치는 이미지의 왼쪽 상단과 같습니다. 작동해야합니다.

filter : expression을 고려하면 CSS에 대한 Microsoft 확장이므로 Internet Explorer에서만 작동합니다. 회색으로 표시하려면 약간의 자바 스크립트를 사용하여 불투명도를 50 %로 설정하는 것이 좋습니다.

http://lyxus.net/mv 는 Firefox, Safari, KHTML, Internet Explorer 및 CSS3 가능 브라우저에서 작동하는 불투명 스크립트에 대해 설명하기 때문에 시작하기에 좋은 장소입니다.

회색 테두리를 줄 수도 있습니다.