液體圖像流體背景圖像

我需要你的幫助！我的客戶想要一個帶全屏幕背景的wordpress頁面。在其中一頁上，我需要在全屏背景圖像上放置3張圖片，這些圖片保持在確切的位置，並且本身是流暢的。圖片上的3個人應該可以選擇，並且會有一個關於他們的信息的燈箱。液體圖像流體背景圖像

這是應該的樣子：

enter image description here

這是背景如何定位：

.bg{ 
    background: url(images/gang.jpg); 
    background-repeat:no-repeat; 
    background-position: center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    width:100%; 
    height:100%; 
    position:fixed; 
    left:0; 
    top:0; 
    z-index:-700; 
    }

，所以我需要三個PNG格式的懸停圖像，即留在三人。如果它不流暢，就不會有問題。有沒有辦法做到這一點與CSS？我是一個JavaScript的noob，但如果有一種方式，請讓我知道。我認爲與背景完全相同大小的3個png和CSS-Mask將會是一個解決方案，但即使FF也不支持，所以沒有選擇。有什麼建議嗎？

謝謝你們，請原諒我的英語！

來源

2012-08-05 kaila

'background-size：contains'可能更安全。使用'背景大小：封面'時，部分圖像可能會在某些屏幕尺寸和方向上被裁剪掉。 – 2012-08-05 22:29:46

而不是使用使用background-size:cover或background-size:contain與全寬BG圖像：

分割內容區域分成3列（1對於每個人）。
對每列的寬度使用響應式設計或流體佈局（或者如果需要，使用JS或jQuery來檢測瀏覽器的寬度和高度並計算每列所需的寬度）。
在display:block; width:100%;的每一列中添加超鏈接。
向width:100%; height:auto;（默認圖像和懸停圖像）添加一對img標籤到超鏈接。
爲每個超鏈接（使用JS或jQuery）添加mouseover/mouseout事件處理程序來切換哪個img標記被隱藏。

使用列的優點是超鏈接熱點將始終匹配每個圖像的大小和位置（否則可能難以對所有屏幕大小和方向執行）。

來源

2012-08-06 00:07:31

液體圖像流體背景圖像

回答

相關問題