Question

我正在尝试使用CSS移动前景图像，因此它与背景图像重叠一点。我似乎无法将前景图像移动到任何地方，我只是无法弄清楚我做错了什么。谁能指出我正确的方向？查看我的fiddle。

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;
}

Answer 1

您缺少.frontImg的高度和宽度的单位（％，em，px等）

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

另外，您可以进行一些优化：您可以将css从样式属性移动到css文件，以获得没有任何内联css的干净html结构。

我认为你的CSS上有一个拼写错误 - 用.background替换.backgroundImg。

Answer 2

您缺少测量单位名称。请尝试使用200px代替200，500px代替500。

如果没有测量单位，您的风格就会被浏览器忽略。

使用CSS移动前景图像

2 个答案: