使用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移动前景图像

回答

相关问题