css/html - 不透明佈局

我創建我的投資組合，我畫了一些佈局，但現在我遇到了代碼問題。正如你可以在圖像上看到的一樣。css/html - 不透明佈局

可視化：

enter image description here

黑色區域將是一個照片
白色區域將是一個正常的bacround顏色/也許也像我去看看。全寬可擴展我想使用可擴展的背景圖像，問題是我不知道如何解決鏈接問題（灰色領域）。因爲我希望鏈接空白在屏幕末尾開始，並在白色背景之前結束（在邊界上）。

我在想圖像映射，但它不是一個好的解決方案......也許你有一個想法。

我發現類似的問題（關於根據背景位置定位鏈接間隙 - 可縮放） - Link is here - stackoverflow 現在我有同樣的問題，就像上面的問題 - 它工作，如果我不會使用比例背景縮放。

2013-03-13 pi.

你可以用CSS3做各種瘋狂的形狀。這可能是你最好的選擇，因爲你不必混淆Javascript或任何東西。 http://css-tricks.com/examples/ShapesOfCSS/ – GJK 2013-03-13 15:40:20

Thx，我忘了css3 :)但我想我以另一種方式弄清楚了......在包裝div中使用兩個div的背景圖像 - 每個50％的寬度。並且按照提示嘗試設置灰色字段的位置，我認爲它應該可以工作，如果我將使用百分比positionig。 – 2013-03-13 15:41:59

我不同意。 CSS形狀依賴於邊框，並且無法將邊框設置爲百分比，以按照他的要求縮放寬度。很確定這樣做的唯一真正有效的方法是javascript，特別是如果他希望它有響應。 – Michael 2013-03-13 15:46:07

這是一個棘手的佈局..但是！（我假設全寬度可縮放和固定長寬比）

由於您知道面積的交集角度將是相同的。如果您將鏈接置於已知的y軸百分比上，您將在x軸上具有固定的百分比。

然後，如果你選擇瀏覽器的全部寬度，你可以使用'position：fixed'（CSS）作爲鏈接以及縮放和頂部/底部/左/右（CSS）。否則我相信你可以用相同的原則使用相對定位。

希望你能在你的路上！

2013-03-13 15:47:23 apelsinapa

回答