Question

我正在尝试使用内联CSS来设置图片精灵的样式。显然，我需要背景位置来工作，但事实并非如此。我不确定是什么问题。它应该是一个可点击的图像，链接到网站的另一个页面，但CSS无法正常工作。

<div class="homepage"><a href="http://homepage.com/"><img src="http://imageLinkToHomepage.com/" style=background-image: "-20px;"></a></div>;

Answer 1

<div class="homepage"><a href="http://homepage.com/"><img src="http://imageLinkToHomepage.com/" style="background-image:-20px;"></a></div>

我认为你有一些混合的引号......

Answer 2

看起来您正在尝试将background-position属性应用于图像标记，但这不起作用。背景属性不适用于图像标记。对于您的特定用例，您可以将背景图像应用于锚标记而无需图像元素 - 如下所示：

<div class="homepage">
  <a href="http://homepage.com" class="image-button"></a>
</div>

.image-button {
  display: inline-block;
  width: 55px;
  height: 55px;
  background: url('http://3.bp.blogspot.com/-q0CJBWRLWUs/T_z2_c7TunI/AAAAAAAABPk/rS7fmE1P-B4/s1600/megaman7.png') no-repeat 0px 0px;
}

.image-button:hover {
  background-position: -55px 0px;
}

在此处查看此操作：http://codepen.io/anon/pen/PqKMLo

Answer 3

我也遇到了同样的问题，我写了!important来解决了这个问题。没有规则被覆盖，但是css并没有把它放在重要位置，这似乎是一个错误。

<div class="ProposalBanner" style="background:url(...\imgs\BannerPRop.jpg) no-repeat center -31px !important"></div>

内联CSS - 后台位置不起作用

3 个答案: