使用CSS移動前景圖像

我正在嘗試使用CSS移動前景圖像，使其與背景圖像重疊一點。我似乎無法讓前景圖像移動到任何地方，我只是無法弄清楚我做錯了什麼。任何人都可以將我指向正確的方向嗎？看我的fiddle。使用CSS移動前景圖像

HTML：

<img src="http://image.tmdb.org/t/p/w1000/aUYcExsGuRaw7PLGmAmXubt1dfG.jpg" style="-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))" 
    width="auto" height="400" class="backgroundImg"> 
<div class="frontImg"> 
<img src="http://image.tmdb.org/t/p/w150/2i0JH5WqYFqki7WDhUW56Sg0obh.jpg" class="" height="300" width="auto"> 
</div>

CSS：

body{ 
background: black; 
} 
.background{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: -1; 
} 
.frontImg{ 
    position: absolute; 
    left:200; 
    top:500; 
    z-index: 1; 
}

來源

2015-12-02 JulianJ

你缺少高度的.frontImg

body{ 
 
    background:black; 
 
} 
 
.backgroundImg { 
 
    position:absolute; 
 
    left:0px; 
 
    top:0px; 
 
    z-index:-1; 
 
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); 
 
} 
 
.frontImg{ 
 
    position:absolute; 
 
    left:200px; 
 
    top:100px; 
 
    z-index: 1; 
 
}

<img src="http://image.tmdb.org/t/p/w1000/aUYcExsGuRaw7PLGmAmXubt1dfG.jpg" width="auto" height="400" class="backgroundImg"> 
 
<div class="frontImg"> 
 
    <img src="http://image.tmdb.org/t/p/w150/2i0JH5WqYFqki7WDhUW56Sg0obh.jpg" height="300" width="auto"> 
 
</div>

單位（％，EM，PX等）和寬度Additionaly你可以做一些優化：您可以將CSS從風格屬性到你的CSS文件，以獲得一個乾淨的HTML結構沒有任何內聯CSS。

而我認爲你的CSS存在拼寫錯誤 - 用.backgroundImg替換.background。

來源

2015-12-02 08:45:01

你缺乏計量單位名稱。嘗試200px而不是200,500px而不是500。

沒有測量單位，您的風格只會被瀏覽器忽略。

來源

2015-12-02 08:43:48 AVAVT

使用CSS移動前景圖像

回答

相關問題