Question

我看过与此相关的类似问题，但我似乎找不到任何人遇到同样的问题。

我正在尝试使用CSS来使sumbit按钮成为图像。这是代码

HTML

<input type="submit" class="search" alt="search" >

CSS

input.search    {
background-image:url(../search-icon2.png);
width:35px;
height:35px; 
}

即使图像“search-icon2.png”正好是35px x 35px且位于服务器上的正确位置，也会在网页中返回损坏的图像。

如果有人能够提出可能存在的问题，我们将不胜感激。

提前致谢。 J

Answer 1

您可以将图像添加到与css文件相同的位置，其中css具有url（'search-icon2.png'）。这将验证您的路径是否真正正确，这不是另一个问题。如果你还有问题可能会检查图像的拼写??

Answer 2

<强> HTML

<a class="buttonImage">
  <span class="left_img"> Hello this is coding 
  </span>
  <span class="right_img"></span>
</a>

<强> CSS

.buttonImage {
    display:inline-block;
    vertical-align:top;
    text-decoration:none;
}
.buttonImage .left_img {
    background: url('http://i.stack.imgur.com/634e1.png') no-repeat 0 0;
    float:left;
    line-height: 15px;
    padding: 7px 0 5px 8px;
    color: #1b1d60;
    cursor: pointer;
}
.right_img {
    background: url('http://i.stack.imgur.com/SyeSO.png') no-repeat 0 0;
    float:left;
    height: 27px;
    width:7px;
    cursor: pointer;
}
.buttonImage:hover .left_img, .buttonImage:hover .right_img {
    background-position:0 -26px;
    color:#fff;
}

<强> Fiddle Demo

Answer 3

只需按照以下步骤操作：搜索按钮图像大小不得大于css规则中初始化宽度和高度的大小。这意味着如果您给出宽度：100px和高度：30px，那么图像必须大小相同。只需借助图像编辑器软件重新调整图像大小我的个人偏好是Adobe Photoshop。如果您的图像大小大于css规则，那么图像可能不会出现或图像将被破坏。我已经编辑了您的HTML以及CSS。

<!DOCTYPE html>
<html>
       <head>
       <style>
            input.search{
                background-image:url(url.jpg);
                text-indent:-9999px;
                width: 100px;
                height: 30px;
                border:2px solid rgb(0,102,153);
           }
       </style>
       </head>

       <body>
       <input type="submit" class="search" alt="search">
</body>
</html>

enter image description here

希望得到答案！

使用CSS将提交按钮设为图像

3 个答案: