여러 CSS 필터를 동시에 사용 하시겠습니까?

여러 CSS 필터를 동시에 사용 하시겠습니까?

---

CSS 필터를 실험하고 있습니다.

블러와 그레이 스케일을 동시에 사용하고 싶지만 같은 이미지에서 동시에 사용할 수없는 것 같나요?

여기에서 바이올린을보십시오 ...

http://jsfiddle.net/joshmoto/fw0m9fzu/1/

.blur {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
}

.grayscale {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
}

.blur-grayscale {
    filter: blur(5px) grayscale(1);
    -webkit-filter: blur(5px) grayscale(1);
    -moz-filter: blur(5px) grayscale(1);
    -o-filter: blur(5px) grayscale(1);
    -ms-filter: blur(5px) grayscale(1);
}

---

이름이라는 하나의 속성이므로 filter스타일을 추가 할 때마다 재정의합니다.

CSS 버전 1

다행히 배경 이미지 및 필터와 같은 일부 속성에 여러 스타일을 추가 할 수 있습니다! 이 작업을 수행하려면 모든 필터 스타일을 공백으로 구분 된 하나의 필터 속성에 넣어야합니다.

.grayscale.blur {
    filter: blur(5px) grayscale(1);
}

CSS 버전 2

대안적이고 유연한 해결책은 의도적으로 "div 수프"를 만들고 html 스택에 다른 필터를 설정하는 것입니다. 예 :

<div class='demo__blurwrap' style='filter: blur(5px);'>
    <div class="demo__graywrap" style='filter: grayscale(1);'>
        <img src="awesome_image.jpeg" alt="">
    </div>
</div>

CSS 버전 3

편집 : 방금이 버전을 변형으로 작성했음을 깨달았지만 동일한 아이디어가 적용됩니다.

또 다른 해결책은 CSS vars입니다. 이상적이라고 말하지는 않지만 좋은 실험입니다. 주요 단점은 많은 변수를 선언해야하고 기본 긴 규칙이 있어야 transform하며 중첩 된 변환이 확실히 중단된다는 것입니다.

// Added just for fun
setInterval(() => {
  yes_this_works_and_one_of_many_reasons_ids_are_bad.classList.toggle('translate');
}, 1000);
setInterval(() => {
  yes_this_works_and_one_of_many_reasons_ids_are_bad.classList.toggle('scale');
}, 1500);

:root {
  --scale: 1;
  --translate: 0px;
}
.box {
  background: blue;
  width: 20px;
  height: 20px;
  transform: 
    scale(var(--scale))
    translate(var(--translate), var(--translate));
  transition: transform .3s;
}
.box.translate {
  --translate: 20px;
}
.box.scale {
  --scale: 3;
}

<div 
  id='yes_this_works_and_one_of_many_reasons_ids_are_bad' 
  class='box scale translate'
></div>

자바 스크립트

마지막으로 JavaScript를 사용하여 스타일을 렌더링하는 경우 getComputedStyle을 사용하여 현재 적용된 필터를 읽고 믹스에 더 추가 할 수 있습니다 .

• 최신 브라우저 데모 설정 스타일
• 현대 브라우저 데모 설정 스타일을 존중하지 않고 관찰자와 함께 수정

그리고 관련 기사-이것은 애니메이션에 대한 내용이며 아직 많은 브라우저에서 지원되지 않습니다. 추가 애니메이션

And another relevant article on css-tricks: Houdini

Maybe in the future

Maybe ever filters might get their own properties to overcome the issue of not being able to combine filters. This could become something like making a longhand form just like properties as background and padding have:

// NON STANDARD, will not work
.grayscale {
    filter-grayscale: 1;
}
.blur {
    filter-blur: 5px;
}

ReferenceURL : https://stackoverflow.com/questions/27421135/use-multiple-css-filters-at-the-same-time