HTML5 中如何设置图片按钮，并且改变大小

最新推荐文章于 2024-06-15 20:00:56 发布

十指流玉

最新推荐文章于 2024-06-15 20:00:56 发布

阅读量1w

点赞数 2

文章标签： HTML

本文链接：https://blog.csdn.net/qq_41886231/article/details/99412575

版权

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

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

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

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

修改前的效果：

这是设置链接的图片。

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

修改后的效果：

图片能够正常显示。

代码：

<!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>

十指流玉

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTML5 中如何设置图片按钮，并且改变大小

很多教程中，都是首先利用PS等软件先将图片设置好大小，个人觉得......emmm我不会用PS，一直麻烦别人也不好，所以呀，还是用CSS调一下呀。首先介绍一下，我想干什么：实现一个功能，设置一个类似于按钮的功能，将图片作为按钮，并且能够正常显示，同时提示按钮的功能信息。没错就这么简单，但是对于我（小白）来说，着实有点棘手，好在搞出来了。首先对比一下效果：修改前的效果：这是设...
复制链接

扫一扫