Question

我尝试制作一个文本为"Buy Now!"的按钮，但我想display small image。我images/Buy-icon中的图片。请告诉它有什么问题？
我的CSS ：

#submit
{       
  background-color: #ffb94b;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fddb6f), to(#ffb94b));
  background-image: -webkit-linear-gradient(top, #fddb6f, #ffb94b);
  background-image: -moz-linear-gradient(top, #fddb6f, #ffb94b);
  background-image: -ms-linear-gradient(top, #fddb6f, #ffb94b);
  background-image: -o-linear-gradient(top, #fddb6f, #ffb94b);
  background-image: linear-gradient(top, #fddb6f, #ffb94b);

 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
  border-radius: 3px;

  text-shadow: 0 1px 0 rgba(255,255,255,0.5);

  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
   box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;    

   border-width: 1px;
   border-style: solid;
   border-color: #d69e31 #e3a037 #d5982d #e3a037;

   float: left;
   height: 35px;
   padding: 0;
   width: 120px;
   cursor: pointer;
   font: bold 15px Arial, Helvetica;
   color: #8f5a0a;
}

#submit:hover,#submit:focus
{       
  background-color: #fddb6f;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffb94b), to(#fddb6f));
  background-image: -webkit-linear-gradient(top, #ffb94b, #fddb6f);
  background-image: -moz-linear-gradient(top, #ffb94b, #fddb6f);
  background-image: -ms-linear-gradient(top, #ffb94b, #fddb6f);
  background-image: -o-linear-gradient(top, #ffb94b, #fddb6f);
  background-image: linear-gradient(top, #ffb94b, #fddb6f);
}   

#submit:active 
{       
outline: none;

 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;        
}

#submit::-moz-focus-inner
{
 border: none;
}

#actions a
{
color: #3151A2;    
float: right;
line-height: 35px;
margin-left: 10px;
}

#submit.buy_icon
{
  background-image:url("../images/Buy-icon.png");
  float: left;
}

在我的 HTML ：

中

<input type="submit" value="Buy Now!" id="submit" class="buy_icon"/>

但是立即购买按钮是成功的，只有图像不是随身携带的。我能做什么？请建议。

Answer 1

您似乎错过了quotes中的background-image，并且您需要!important来支持默认行为：

.buy_icon
{
background-image:url('../images/Buy-icon.png')  !important;
width:32px;
height:32px;
border-width: 0;
background-color: transparent;
}

http://jsfiddle.net/Ph6Wt/

Answer 2

用于此#submit.buy_icon

就像这样

  #submit.buy_icon
    {
    background-image:url("http://i.stack.imgur.com/nPfZp.jpg?s=32&g=1");
background-position:right 0;
    background-repeat:no-repeat;
height:32px;
border-width: 0;
    text-align:left;
    padding-left:10px;
    }

你要定义css #submit css现在id比定义更强大class

你的css中的id和class

#submit.buy_icon

------------

<强> Updated Demo

Answer 3

您为#submit定义的背景优先于您为.buy_icon定义的内容

在.buy_icon中的background-image属性后添加！important，这可能有帮助

在按钮中添加图像

3 个答案:

------------