使用CSS覆蓋背景圖像具有固定的長寬比

我有這個CSS代碼根據瀏覽器大小調整背景圖像的大小，使圖像的中心始終位於瀏覽器窗口的中心！現在問題是我需要在中心添加另一個圖像，就像圓圈中的圖標一樣，它也遵循維持縱橫比的相同規則！使用CSS覆蓋背景圖像具有固定的長寬比

如何應用相同的代碼來保持寬高比爲我的第二張圖片？主要是，如何在中心添加覆蓋背景的另一個圖像？我還附加了使用Photoshop實現的背景圖像！

enter image description here

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>

來源

2014-02-09 user3289834

您是否嘗試過使用背景大小和背景位置來覆蓋整個視口並將背景放置在中心？ – RDrazard

如果它是一個「背景圖像」，然後去使用CSS背景（-image）屬性。如果它屬於頁面的真實內容，那麼在HTML中使用'img'。因此，對於背景圖像，CSS提供了很多關於調整大小，定位等的選項！ – Netsurfer

@RDrazard背景圖片和調整大小工作完美罰款..什麼我不能做的是應用相同的規則集到另一個圖像，將圍繞圓的大小和覆蓋在這裏附加的截圖圓圈（ http://i.imgur.com/52OSjA0.png）..我應該向我的COde添加什麼？我很抱歉我是一個新手..在大學項目上工作..自2天以來堅持 – user3289834

如果你想要做的是覆蓋另一個圖像定位完全一樣的第一個，那麼你可以只重新使用您現有的代碼。添加另一個div與另一個圖像，並將#stage ID更改爲一個類。

第二張圖片當然需要一些透明度才能看到第一張圖片的任何內容......並且可能達到預期效果的尺寸完全相同。

這裏是一個jsfiddle。

來源

2014-02-09 15:13:56 pschueller

謝謝Sooooo很多！ – user3289834

謝謝你很多..只是問題是我想覆蓋的第二個圖像佔用了整個屏幕..我希望它是整個頁面的20％..但應始終保持在中心和相同長寬比！在這種情況下我應該做什麼？ – user3289834

你可能只是讓圖片更大......在它周圍添加一大堆空的/透明的空間。我會讓它與它背後的圖像具有相同的確切大小，以確保它們的行爲方式相同。 – pschueller

使用CSS覆蓋背景圖像具有固定的長寬比

回答

相關問題