Question

现在尝试解决这个问题已经很长时间没有成功了。我需要创建如下的css 要求：http://s22.postimg.org/3xp5ut1gx/needed.jpg 我必须使用附加的图像。覆盖：http://i.stack.imgur.com/VNK86.png 没有切割它我没有办法做到这一点，但我必须在不切割的情况下做到这一点。我知道它在背景位置的某个地方，但没有设法这样做。非常感谢你的帮助。代码很简单：

<div id="large-box">
        <div id="image"><img src="images/101512asiatodaysoftbank1_167x94.jpg" alt="stock-img" id="large-img" />
            <div id="play-btn"></div>
        </div>
      <p class="large-desc">Billionaries Love These 5 Stocks</p>
    </div>

所以css：

#large-box {
overflow: hidden;
height: 260px;
width: 293px;
position:relative;}

#image {
height: 230px;
position:relative;
}

#image img{
max-width:293px;
max-height:230px;
}

#play-btn {
background-image:url(../images/play.png);
background-repeat:no-repeat;
position:absolute;
bottom:75px;
left:10px;
width:101px;
height:43px;
z-index:10;
cursor: pointer;
/* display:none; */
}

Answer 1

如果我理解你的话，那就是你要找的东西：http://codepen.io/BenMann/pen/hoyqD

然而，您的图像（使用播放按钮）看起来并不完全透明。它也不一定要那么大..如果你把它裁剪成只包含两个播放按钮而没有空格你可以减小图像尺寸！

无论如何，尝试修补background-position: 0 -290px;以使其完美契合。

修改

如果你需要在整个图像上发生悬停，我只是添加了一些jQuery。也可以通过切换设置背景位置的类来简化它，但是你明白了。

如何在悬停时在img标签上移动背景图像

1 个答案: