가로 세로 비율이 고정 된 배경 이미지 위에 CSS를 사용하여 오버레이 이미지

Question

브라우저 창의 중심을 항상 유지하면서 브라우저 크기에 따라 배경 이미지의 크기를 조절하는이 CSS 코드가 있습니다! 이제는 종횡비를 유지하는 동일한 규칙을 따르는 원 안의 아이콘처럼 가운데에 다른 이미지를 추가해야합니다.

두 번째 이미지의 종횡비를 유지하는 데 동일한 코드를 어떻게 적용합니까? 그리고 주로 배경에 중첩하는 다른 이미지를 어떻게 추가합니까? Photoshop을 사용하여 얻은 배경 이미지도 첨부했습니다!

CSS

#stage { 
     position:fixed; 
     top:-50%; 
     left:-50%; 
     width:200%; 
     height:200%; 
    } 

    #stage img { 
     position:absolute; 
     margin:auto; 
     min-width:50%; 
     min-height:50%; 
     top:0; 
     left:0; 
     right:0; 
     bottom:0; 
    } 

    @media screen and (max-width: 512px) { 
     #stage img { 
     width:100%; 
     height:auto; 
    } 

HTML

<div id=stage> 
    <img src="cutest_child_in_the_world-wallpaper-5120x3200.jpg" /> 
    </div> 

Answer 1

당신이 원하는 모든 다른 이미지가 정확히 처음처럼 위치 오버레이, 다음 방금 할 수있는 경우 기존 코드를 다시 사용하십시오. 다른 이미지로 다른 div를 추가하고 #stage ID를 클래스로 변경하십시오.

첫 번째 이미지를 보려면 두 번째 이미지에 투명도가 있어야하며 원하는 효과를 얻으려면 정확히 같은 크기 여야합니다.

여기에 a jsfiddle.