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

Program / 글쓴이

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>

스 니펫 확장

유용한 메모