Question

我尝试制作一个带有图像的按钮，如下所示：

HTML

<input type="image" value="submit" src="images/map.png" id="location" />

并且这是css内容（在单独的css文件中）

#location{
position: fixed;
right: 10px;
bottom: 20px;
width: 80px;
height: 80px;
z-index: 2;
background-image: url('../images/map.png');
}

这是我的css文件在HTML文件中的调用：

<link rel="stylesheet" href="css/style.css" />

问题是我只有一个没有图片的空方格......

有什么问题？提前谢谢。

Answer 1

请勿使用输入类型图像。

只需使用input[type="submit"]或input[type="button"]

即可

HTML

<input type="button" value="submit" id="location" />

CSS

#location{
     position: fixed;
     text-indent: -9999px;
     right: 10px;
     bottom: 20px;
     width: 80px;
     height: 80px;
     z-index: 2;
     background-color: url('./image/map.png';
     border: none;
}

Answer 2

我更喜欢定义元素并在其上设置背景，并为此跨度定义OnClick的事件处理程序作为按钮

<span style="background-image: url(../images/map.png)" onclick="clickFunction"> </span>
<script>
    function clickFunction() {
           // click event handler
    }
</script>

Answer 3

不确定在按钮上使用background-image会出现什么问题。这是一个简单的小提琴：http://jsfiddle.net/YG7sX/。

HTML：

<button id = "location"></button>

CSS：

#location{
    position: fixed;
    right: 10px;
    bottom: 20px;
    width: 80px;
    height: 80px;
    background: url(http://placehold.it/80x80) no-repeat;
    z-index: 2;
}

如何使图片像按钮一样

3 个答案: