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%); 
}

브라우저 지원은 꽤 괜찮은 편입니다, https://caniuse.com/css-filters .

여기 있습니다.

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

Cs 그레이:

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

자바스크립트를 조금 사용해도 괜찮으시다면, jQuery의 페이드To()는 제가 시도한 모든 브라우저에서 잘 작동합니다.

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

그레이아웃 방법:

"무채화를 시키기 위해"

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

여기 배경의 색상을 설정할 수 있는 예제가 있습니다.플로트를 사용하지 않으려면 너비와 높이를 수동으로 설정해야 할 수도 있습니다.그러나 그것조차도 실제로 주변 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>

사용가능rgba()대신 색을 정의하기 위해 css에서rgb(). 다음과 같은 경우:style='background-color: rgba(128,128,128, 0.7);

와 동일한 색상을 제공합니다.rgb(128,128,128)하지만 70%의 불투명도로 뒤에 있는 것들은 30%까지만 보입니다.CSS3는 2008년 이후 대부분의 브라우저에서 작동합니다.죄송합니다. 제가 아는 #rrggb 구문이 없습니다.숫자를 가지고 놀아라. 흰색으로 씻어내고, 회색으로 그림자를 지울 수 있고, 희석하고 싶은 것은 무엇이든 할 수 있습니다.

따라서 반투명 회색(또는 어떤 색이든)으로 직사각형을 만들어 이미지 위에 놓으십시오. 절대 및 z 인덱스가 0보다 높은 위치일 수 있습니다. 이미지 바로 앞에 놓으면 직사각형의 기본 위치가 이미지의 왼쪽 상단 모서리와 같습니다.효과가 있을 겁니다.

필터 고려: expression은 CSS에 대한 Microsoft 확장이므로 Internet Explorer에서만 작동합니다.그레이 처리를 원한다면 자바스크립트를 조금 사용하여 불투명도를 50%로 설정하는 것을 추천합니다.

http://lyxus.net/mv 은 Firefox, Safari, KHTML, Internet Explorer 및 CSS3 지원 브라우저와 함께 작동하는 불투명 스크립트에 대해 설명하므로 시작하기에 좋습니다.

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

언급URL : https://stackoverflow.com/questions/286275/gray-out-image-with-css