ie7, 8, 9, 10, FF 및 Chrome의 마스크 디스플레이와 호환 가능

사진에 마스크와 버튼의 레이어가 있다는 것을 자주 접하게 됩니다. 마우스를 굴리면 마스크의 색상이 더 어두워지고 버튼의 그림이 여러 번 부딪히게 됩니다. , 마침내 질문에서 언급한 대로 호환 가능한 솔루션을 생각해냈습니다.

마스킹 구현을 위해 마스크 레이어, 버튼, 그림을 동일한 div에 배치합니다. 절대 위치 추종 기능에 따라 마스크 레이어와 버튼을 그림 앞에 배치하고 위치를 절대값으로 설정합니다. 그리고 어떤 공간도 차지하지 않습니다. 마스크 레이어의 색상과 투명도를 설정합니다. 색상과 투명도는 마스크 레이어 전체와 하위 요소의 투명도로 설정되므로 버튼 이미지를 마스크 레이어에 배치하면 버튼 이미지에도 투명도가 적용됩니다. , 원하는 시각적 효과를 얻을 수 없으므로 마스크 레이어와 버튼 아이콘을 플랫으로 설정하세요.

그러나 IE7과 8에서는 배경색의 rgba가 마스크 레이어의 효과를 나타낼 수 없으므로 빨간색 상자의 색상과 투명도를 다르게 작성해야 합니다.

배경은 검정색으로 설정되고 불투명도는 투명도를 설정하며 필터는 IE 필터입니다(IE가 투명도 표시와 호환되도록 만들기 위해)

제목에 언급된 각 브라우저에 대해 일관된 시각적 효과를 얻을 수 있습니다.