일부 div가 작동하지 않는 그레이 스케일의 전체 웹 사이트

페이지가 표시되는 onload가 있습니다. 전체 사이트는 그레이 스케일에 있지만 비 - 그레이 스케일에 있기 위해 div를 팝업하고 싶습니다. filter: none 또는 -webkit-filter: grayscale(0);으로 시도했지만 전체 페이지가 회색조로 작동하지 않습니다. 누구든지 그것에 대해 어떤 생각을 가지고 있습니까? 감사!일부 div가 작동하지 않는 그레이 스케일의 전체 웹 사이트

-webkit-filter: grayscale(0) !important; 
filter: grayscale(0) !important;

내 코드 : Jsfiddle

출처

2017-12-01 Sammi

가능한 중복 (https://stackoverflow.com/questions/26087286/want-to-make-the-whole -page-in-grayscale-except-specified-div) – ceejayoz

안녕하세요 삼미, 상기 요구 사항을 달성하기 위해 옵션 중 하나는 몸 위에 오버레이 div를 만드는 것입니다. 본문 대신 그레이 스케일로 만들 수 있습니다. 나중에 팝업 메뉴를 오버레이보다'z-index' +1로 표시하십시오. 본문에 회색 음영을 적용 할 때 팝업은 동일한 스타일을 상속합니다 (본문의 하위 항목 임). – CuriousMind

@Sami 또한 팝업 필터를 이스케이프 처리하는 .filter의 모든 웹 사이트 코드를 입력하여이 작업을 수행 할 수 있습니다. 그런 다음 필터 클래스의 모든 필터를 사용할 수 있습니다. –

-webkit-filter는 폭포 아래로 덮어 쓸 수 있습니다, 그것은 전체 요소와 어린이의 상단에 적용된 속성이 아닙니다. 자식에 필터를두면 부모의 필터 위에 스택됩니다.

대신 회색으로 표시하려는 모든 항목의 부모 인 요소에 필터를 배치해야합니다.

div { 
 
    height: 20px; 
 
    position: relative; 
 
}

<div> 
 
    <div style="-webkit-filter: grayscale(1)"> 
 
    <div style="background: red">Sample</div> 
 
    <div style="background: blue">Sample</div> 
 
    </div> 
 
    <div style="background: green; position: absolute; top: 10px;">Sample</div> 
 
</div>

[지정된 사업부를 제외하고 그레이 스케일로 전체 페이지를 원하십니까]의

출처

2017-12-01 06:35:36

Jacque에게 필터와 캐스케이드 효과에 대해 설명해 주셔서 감사합니다. – CuriousMind

일부 div가 작동하지 않는 그레이 스케일의 전체 웹 사이트

답변

관련 문제