很多教程中，都是首先利用PS等软件先将图片设置好大小，个人觉得......emmm我不会用PS，一直麻烦别人也不好，所以呀，还是用CSS调一下呀。

首先介绍一下，我想干什么：

实现一个功能，设置一个类似于按钮的功能，将图片作为按钮，并且能够正常显示，同时提示按钮的功能信息。

没错就这么简单，但是对于我（小白）来说，着实有点棘手，好在搞出来了。首先对比一下效果：

修改前的效果：

html5通过按钮调接口 html5怎么设置按钮大小_javascript button大小

这是设置链接的图片。

html5通过按钮调接口 html5怎么设置按钮大小_css_02

设置连接以后就成这样了。。。

修改后的效果：

html5通过按钮调接口 html5怎么设置按钮大小_HTML_03

图片能够正常显示。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盒子模型测试</title>
    <style class="text/css">   
 .返回{
        background-image: url(标签.gif);
        background-repeat: no-repeat;
        line-height: 0;
        padding: 20px;/*使得照片能够显示出来，不信去掉试试*/
        background-size:40px 40px;/*调整图片的大小*/
        /*以上两条个人认为需要共同存在才能够保证正常显示*/
        display: inline-block;
        text-indent: -999px;
    }
    
    </style>
</head>
<body>
    <a class="返回" href="#" title="返回">返回</a>
</body>
</html>