0

我尝试制作一个文本按钮，"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"/>

但是“立即购买”按钮成功了，只有图像没有附带。我能做些什么？请建议。

4

3 回答 3

2

看起来你缺少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/

于 2013-04-26T08:52:10.863 回答
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 #submitcss 现在比定义id更强大class

你的css中的id和class

#submit.buy_icon

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

更新的演示

于 2013-04-26T08:53:52.147 回答
0

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

在 .buy_icon 的 background-image 属性之后添加 !important 可能会有所帮助

于 2013-04-26T08:53:16.587 回答