css提交按鈕背景圖像

Question

我想在提交按鈕中添加背景圖像。 我添加了一張圖片但是當我no-repeat背景圖像消失了！ 我應該怎么做才能避免丟失圖像？

HTML

<div class="comtextarea">
  <textarea name="comment" class="comment" maxlength="200"  id="" rows="2" cols="50"></textarea>
  <input type="submit" value="" class="combut"/>
</div>

CSS

    .comtextarea {
      float:left;
      width:550px;
      height:auto;
    }
    .comment {
      width:550px;
      resize:none;
      outline:none;
      border:1px solid #abc7d0; 
    }
    .combut {
      float:right;
      margin-top:-36px;
      z-inde:3;
      position:relative; 
      outline:none;
      width:30px;
      height:30px;
      background-image:url(https://scontent-a-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/10291103_828742610487379_816788942451910142_n.jpg) no-repeat;
      padding:0px 0 4px 0; border:none;
      text-indent:-10000em; 
}

這是DEMO頁面

Answer 1

這是因為你將它設置為屬性background-image 。

background-image屬性僅用於指定背景圖像值，不包含其他與背景相關的屬性。

將其更改為background 。

或者有2個獨立的屬性：

background-image: url(..URL HERE..);
background-repeat: no-repeat;

我個人更喜歡2個單獨的屬性。 更清楚地看到應用了no-repeat值，並且在源代碼控制更改下更易於管理。

Answer 2

你的CSS有點不對，改變：

background-image:url(https://scontent-a-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/10291103_828742610487379_816788942451910142_n.jpg) no-repeat;

至：

background:url(https://scontent-a-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/10291103_828742610487379_816788942451910142_n.jpg) no-repeat center center;

http://codepen.io/anon/pen/hqIxd

Answer 3

如果習慣了css中的所有屬性，就像repeat position一樣使用background

如果您習慣使用background-image不是像這樣定義 image url

background-image: url('some.jpg');

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

取而代之

background-image:url(https://scontent-a-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/10291103_828742610487379_816788942451910142_n.jpg) no-repeat;

進入這個

background:url('https://scontent-a-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/10291103_828742610487379_816788942451910142_n.jpg') no-repeat;

演示

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

或習慣了這個

background-image:url('https://scontent-a-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/10291103_828742610487379_816788942451910142_n.jpg');
background-repeat:no-repeat;