그레이 스케일 (100 %) 컨테이너 내부의 컬러 이미지

Question

배경 이미지가있는 div가 있으며 필터를 사용하여 흑백으로 표시합니다 (filter: grayscale(100%);). 이제 div에 색상 아이콘을 배치하려고합니다. 아이콘을 grayscale(0%)으로 설정하려고 시도했지만 작동하지 않습니다.

#a1, #a2 { 
 
    background-image: url(http://ndrichardson.com/blog/wp-content/uploads/2012/04/colorpsychology.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
} 
 
#a1 { 
 
    height: 250px; 
 
    width: 250px; 
 
    -webkit-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
    position: relative; 
 
} 
 
#a2 { 
 
    height: 50px; 
 
    width: 50px; 
 
    -webkit-filter: grayscale(0%); 
 
    filter: grayscale(0%); 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0px; 
 
}

<div id="a1"><!-- << this should be black and white --> 
 
    <div id="a2"><!-- << this should be color --> 
 
    </div> 
 
</div>

배경 이미지를 유지하기 위해 추가 사업부를 작성하지 않고 할 수있는 방법이 있나요 : 여기

은 예입니다? 실제 코드는 훨씬 더 복잡하므로 가능한 경우 추가 div를 피하고 싶습니다.

Answer 1

예 물론, 당신은 ::before 및 ::after 의사 요소를 사용한다 :

#a1 { 
 
    height: 250px; 
 
    width: 250px; 
 
    position: relative; 
 
} 
 
#a1:after, #a1:before { 
 
    content: ''; 
 
    background-image: url(http://ndrichardson.com/blog/wp-content/uploads/2012/04/colorpsychology.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
    position: absolute; 
 
} 
 
#a1:before { 
 
    -webkit-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#a1:after { 
 
    height: 50px; 
 
    width: 50px; 
 
    top: 0px; 
 
    right: 0px; 
 
}

<div id="a1"></div>

이

DEMO on JSFiddle

Answer 2

그것은 filter: grayscale(100%)와 컨테이너 내부 색상을 가질 수 없습니다.

는 사양 (강조 내)에서 the filter property 참조 : 다른 none보다 결과

전산화 값 CSS opacity는 않는다는 stacking context 동일한 방식으로 생성된다. 모두 자손 요소는 그룹으로 함께 필터 효과가 적용된으로 렌더링됩니다.

그렇습니다. 그렇다면 콘텐츠가없는 콘텐츠는 필터없이 분리해야합니다.

이것은 Hiszpan이 의사 요소를 사용할 수 있다고 제안했기 때문에 반드시 HTML에 추가 래퍼가 필요하다는 의미는 아닙니다.