相對於列寬的CSS圖像位置或屏幕尺寸

Question

是否可以將圖像相對於不同部分的中心或屏幕尺寸的中心進行定位？

我試圖放置一個跨越3個部分的大約2.28：1的徽標，以便覆蓋每個單獨的部分背景，但不覆蓋整個行背景。

此外，我想（儘管不是絕對必要）每個部分和徽標的每個部分是不同的顏色。我有點能夠通過三種不同的背景和背景的三個不同位置（L部分，L標誌等）實現這一點。雖然這在整個屏幕上看起來不錯，但當屏幕較小時，標誌位置不正確。

我在想這樣做的方法是將L和R圖像相對於中心列的中心，或相對於整個窗口的中心。如何才能做到這一點？

網站參考：http://ironorrfitness.com

Answer 1

我能夠達到預期與左節標識下面的代碼影響：

background-position: -webkit-calc(50% + 33vw) 60%; 
background-position: calc(50% + 33vw) 60%; 

，並在右側的標誌下面的代碼部分：

background-position: -webkit-calc(50% + 33vw) 60%; 
background-position: calc(50% + 33vw) 60%; 

每個部分都使用了定位相同但每個部分顏色不同的徽標圖像。