div의 배경 블렌드

Question

첨부 된 스크린 샷과 같은 배경 혼합 효과를 원합니다. 나는 이미 rgba 배경을 사용하고 있지만 그건 내 디자인처럼 보이지 않습니다.

다음은 내가 사용한 이미지와 코드입니다.

다른 배경 이미지와 CSS3 요소를 사용했지만 제대로 작동하지 않았습니다.

jquery를 사용하여 이것을 가능합니까?

.green_band {background: rgba(24, 95, 14, 0.5);} 

Answer 1

난 당신가 WebGL 쉐이더를 쓰고 싶어하지 않는 포토샵 이외의 모드를 혼합 사용하는 방법이 확실하지 않다.

Answer 2

아니요, 현재 (2014 년 여름) 알파 투명도를 사용하여이를 위조 할 수 있습니다 (예 : rgba 사용).

CSS 블렌드 모드가 올 것이지만, "곧 출시 될 기술이며이 글을 쓰는 시점에는 브라우저 지원이 엉뚱한 것입니다." 소개를 위해서는 “Getting to know CSS Blend Modes”을, the browser support tables for background-blend-mode을 참조하십시오. 소개 : the browser support tables for background-blend-mode 참고 : 소개 : the browser support tables for background-blend-mode

곧 CSS 혼합 모드 속성 사용 :

여기

background-color: rgb(24, 95, 14); 
background-blend-mode: multiply; 

가 W3C Editor’s Draft: Compositing and Blending Level 1