内联CSS-背景位置不起作用

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完成了工作!important没有规则被覆盖，但是css没有应用它而不重要，这似乎是一个错误。

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