定位到父級背景上的特定元素

我想在HTML5/CSS3中製作獨立於設備的動畫。這意味着我有一個背景圖像，具體地繪製，使得它的邊緣可被切斷，我使用它在一個div元件與background-size: cover，像這樣：定位到父級背景上的特定元素

#main-image { 
    background: url(intro1-1.jpg) no-repeat center center fixed; 
    background-size: cover; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
    z-index: 0; 
} 

#propeller { 
    background: url(propeller2.png) no-repeat; 
    position: relative; 
    top: 265px; 
    left: 1080px; 
    z-index: 10; 
    background-size: 100% 100%; 
    width: 18%; 
    height: 12%; 
} 

<div id="main-image"><div id="propeller"></div></div>

在背景層的頂部上，我想繪製動畫層。麻煩在於：如何將透明動畫部分放置在完整（未縮放）的背景圖像中的特定位置？

我還需要使用與縮放背景相同的比例來縮放動畫層。但我該怎麼做？

因此，實際上，我正在尋找一種方式來加載高清背景圖像，定義HD動畫層在它的上面，並然後應用cover，填充整個瀏覽器屏幕。

要做到這一點，最簡單的方法是什麼？

來源

2013-10-09 Agoston Horvath

根據我的經驗，這在純CSS中很難做到。我做了類似的東西你問這裏：http://jsfiddle.net/ahhcE/

這裏是螺旋槳特定代碼：

#propeller { 
    background: url(propeller2.png) no-repeat; 
    background-color: blue; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-left: -9%; 
    margin-top: -6%; 
    z-index: 10; 
    background-size: 100% 100%; 
    width: 18%; 
    height: 12%; 
}

我定位只是爲了便於絕對的，但你可能會想它相對如果它的位置相對於父div。

（遺憾的顏色，我更換爲你的形象）

的問題是，在上邊距和高度比例，在瀏覽器從窗口的寬度繼承這些值。所以你會注意到，如果你調整視圖窗口的大小，盒子不能保持完美居中。我通常使用javascript解決這個問題。類似這樣的：

function heightAdjust() { 
    var windowHeight = $(window).height(); 
    totalMenuHeight = $("#menu").height(); 
    document.getElementById('menu').style.marginTop = windowHeight/2 - totalMenuHeight/2 + 'px'; 
    $('.thing').css("height", windowHeight+'px'); 
}

希望有幫助。垂直居中是您唯一的問題，您還可以使用表格式來成功破解這個問題，這是幾個網站用於垂直定位的原因。更多關於這個，以及其他解決方案在這裏：http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

來源

2013-10-09 23:10:41 maxm

如果你聲明'width'＆'height'，只需使用'margin：auto'就像文章中那樣。另外，您可以使用「padding-top」或「padding-bottom」來設置相對於容器寬度的高度，從而可以輕鬆設置隨視口更改的比率：http://jsfiddle.net/shshaw/ahhcE/ 2 / – shshaw

定位到父級背景上的特定元素

回答

相關問題