流體背景圖像上的流體圖像

Question

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

這是它的外觀：

這是背景的定位方式：

.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作為懸停圖像，這些png保持在三個人上。 如果它不應該流動就沒有問題。 有沒有辦法用CSS做到這一點？ 我有點像JavaScript的菜鳥，但是如果有辦法，請告訴我。 我認為3 png與背景大小完全相同，並且具有CSS-Mask是解決方案，但即使FF也不支持，因此沒有選擇。 有任何想法嗎？

謝謝大家，請原諒我的英語！

Answer 1

而不是使用background-size:cover或background-size:contain全角bg圖像：

• 將內容區域划分為3列（每個人1列）。
• 對每列的寬度使用響應式設計或流暢的布局（或者，如有必要，使用JS或jQuery檢測瀏覽器的寬度和高度，並計算每列所需的寬度）。
• 在每列中使用display:block; width:100%;添加超鏈接display:block; width:100%; display:block; width:100%; 。
• 在width:100%; height:auto;的超鏈接中添加一對img標簽width:100%; height:auto; width:100%; height:auto; （默認圖像和懸停圖像）。
• 將mouseover / mouseout事件處理程序添加到每個超鏈接（使用JS或jQuery），以切換隱藏哪個img標簽。

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