CSS로 이미지를 흐리게 처리 하시겠습니까?

CSS로 이미지를 흐리게 처리 하시겠습니까?

---

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 을 달성하십시오 -그레이 스케일 필터를 적용하는 방법?

---

If you don't mind using a bit of JavaScript, jQuery's fadeTo() works nicely in every browser I've tried.

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

---

Better to support all the browsers:

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

---

Here's an example that let's you set the color of the background. If you don't want to use float, then you might need to set the width and height manually. But even that really depends on the surrounding 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>

---

You can use rgba() in css to define a color instead of rgb(). Like this: style='background-color: rgba(128,128,128, 0.7);

Gives you the same color as rgb(128,128,128) but with a 70% opacity so the stuff behind only shows thru 30%. CSS3 but it's worked in most browsers since 2008. Sorry, no #rrggbb syntax that I know of. Play with the numbers - you can wash out with white, shadow out with gray, whatever you want to dilute with.

OK so you make a a rectangle in semi-transparent gray (or whatever color) and lay it on top of your image, maybe with position:absolute and a z-index higher than zero, and you put it just before your image and the default location for the rectangle will be the same upper-left corner of your image. Should work.

---

To gray out:

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

“to fill with gray.”

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>

---

Helpful notes

• What's the difference between CSS3 filter grayscale and saturate?

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

---

Considering filter:expression is a Microsoft extension to CSS, so it will only work in Internet Explorer. If you want to grey it out, I would recommend that you set it's opacity to 50% using a bit of javascript.

http://lyxus.net/mv would be a good place to start, because it discusses an opacity script that works with Firefox, Safari, KHTML, Internet Explorer and CSS3 capable browsers.

You might also want to give it a grey border.

참고URL : https://stackoverflow.com/questions/286275/gray-out-image-with-css