如何在结帐按钮中使用带有“img src =”的sprite图像

时间:2015-01-30 15:53:57

标签: sprite css-sprites

我试图实施一个精灵,所以" buy-now-black.jpg"此代码中的图片

<div class="price-footer">
<a href="https://gumroad.com/l/12criticalthings?wanted=true"><img src="img/buy-now-black.jpg" width="131" height="134" alt="buy now"></a></div> 

切换到精灵内的相同图像。

该图片的html是

<div class="buy-now-black"></div>

但我无法弄清楚如何在购买按钮代码中引用它。

这里是与精灵相关的CSS:

    .two-choices-blue-txt, .12-critical-things-logo-simple, .the-new-york-times-vector-logo, .paypal-checkout-1-digital, .buy-now-black,
.buy-now-blue, .buy-now-dark-gray, .buy-now-green, .paypal-checkout-1-print, .paypal-checkout-5-print,
.usnews-n-ww-logo, .today-show, .savvy-senior-110w, .ducttape-logo, .john-jantsch
{ display: inline-block; background: url('http://s3.amazonaws.com/bothsider_bucket/4_1422626839_0.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }

.two-choices-blue-txt { background-position: -2px -0px; width: 348px; height: 252px; }
.12-critical-things-logo-simple { background-position: -2px -254px; width: 276px; height: 31px; }
.the-new-york-times-vector-logo { background-position: -2px -287px; width: 141px; height: 20px; }
.paypal-checkout-1-digital { background-position: -145px -287px; width: 133px; height: 196px; }
.buy-now-black { background-position: -2px -309px; width: 131px; height: 134px; }
.buy-now-blue { background-position: -2px -445px; width: 131px; height: 134px; }
.buy-now-dark-gray { background-position: -135px -485px; width: 131px; height: 134px; }
.buy-now-green { background-position: -2px -581px; width: 131px; height: 134px; }
.paypal-checkout-1-print { background-position: -135px -621px; width: 127px; height: 176px; }
.paypal-checkout-5-print { background-position: -2px -717px; width: 127px; height: 176px; }
.usnews-n-ww-logo { background-position: -131px -799px; width: 111px; height: 27px; }
.today-show { background-position: -131px -828px; width: 111px; height: 40px; }
.savvy-senior-110w { background-position: -131px -870px; width: 110px; height: 51px; }
.ducttape-logo { background-position: -2px -895px; width: 108px; height: 50px; }
.john-jantsch { background-position: -280px -254px; width: 50px; height: 50px; }

html,css和sprite图片的来源是spritegen.com(我与他们没有任何关系)

0 个答案:

没有答案