Web開發 - 如何確保某些元素在背景圖像上的位置？

我有一個客戶誰給了我一個他想成爲他的背景的圖像。在特定位置的圖像上方，他希望在上面有文字，更具體的是鏈接。例如建築物的照片，並且在建築物的門上，他想要一些文字說出門。（這只是一個例子，不能分享真實的照片，因爲他是一張照片，而這張照片是未發表的照片）。我問他給我一個圖像的4：3版本和16：9版本，所以我可以強制它全屏幕，並保持原始方面，而不削減圖像。無論用戶的屏幕分辨率還是圖像的方面，如何讓文本始終處於相同的位置。有一個想法來檢查當前的分辨率，並加載適當的圖像。Web開發 - 如何確保某些元素在背景圖像上的位置？

是這樣的可能嗎？圖像不能縮放或裁剪，它們必須保持原來的狀態。

來源

2014-01-25 user3235636

是的，這很簡單。你的圖片將在div中，然後在div中，你將擁有鏈接的容器，你可以「定位：絕對;'。下一次問一個問題，請告訴我們你已經嘗試了什麼。這是更多的「幫我試試」不是「爲我做」網站 – ntgCleaner

@ntgCleaner，對不起，我用這個網站了很多。第一次發佈。我一直在使用背景大小：封面;爲元素的背景圖片和頁邊距，頁邊空白。但有不同的分辨率和圖像的不同方面的問題。我會嘗試絕對定位。謝謝。 – user3235636

沒問題。如果必須從4：6切換到16：9，則可能需要按類似的方式命名類。如果圖像是4：6，則給包含div的一個'class =「image4x6」'或類似的東西。然後，你可以「定位：絕對」的內部鏈接div，它總是在正確的位置 – ntgCleaner

使用

background-size: 100% 100%; /*keep bg image full size of div*/ 
    background-position:fixed /*this will keep bg position fixed*/

demo

保持高寬比，同時保持的背景圖片固定的位置，用途：

background-size: 100% auto;

demo

來源

2014-01-25 18:25:10 NoobEditor

Web開發 - 如何確保某些元素在背景圖像上的位置？

回答

相關問題