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。

或者有两个独立的属性：

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中的所有媒体资源，请background使用repeat position 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;

<强> Demo

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

或习惯于此

{{1}}

css提交按钮背景图像

3 个答案:

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

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