HTML中给Button加图片背景的具体写法

最新推荐文章于 2025-01-21 22:05:22 发布

superfreak

最新推荐文章于 2025-01-21 22:05:22 发布

阅读量1.2w

点赞数 3

分类专栏： HTML 文章标签： css html html5

本文链接：https://blog.csdn.net/superfreak/article/details/120435368

版权

HTML 专栏收录该内容

8 篇文章

订阅专栏

本文是搜集和整理的几种给HTMLButton 添加背景图片的方法：

写法一：写在HTML里面。缺点是图片不容易和按钮互相完美贴合，如果美观的话还需要进一步想想办法。

　　<img src="../img.png" >按钮一

</button>

写法二：写在CSS中。这个就是把按钮的边框去掉了，把图像设置为不重复，其他的效果自己添加即可。

button{
    width: 100px;
    height:45px;
    background: url("vue1/test2.png") no-repeat;
    border-style: none;
}

写法三：内联CSS的写法。这种写法需要注意你的png图片的具体位置是相对于你的HTML文件的，我的图片是是放在css/images/目录下了。这种写法简单，直观，肯定起作用。缺点是难以重用。

<div class=bigButtonDiv id="idBigButtonDiv">
    <button  class="bigbutton" id="FirstBigButton"   style="background: url(css/images/CYD1_S.png) no-repeat;height: 120px;width:  120px;" aria-label="FirstBigButton"  title="FirstBigButton" >   </button>     
    <button  class="bigbutton" id="SecondBigButton"  style="background: url(css/images/CYD2_S.png) no-repeat;height: 120px;width:  120px;" aria-label="SecondBigButton" title="SecondBigButton">   </button>
    <button  class="bigbutton" id="ThirdBigButton"   style="background: url(css/images/CYD3_S.png) no-repeat;height: 120px;width:  120px;" aria-label="ThirdBigButton"  title="ThirdBigButton" >   </button>     
    
  </div>

后续也许会给更多的写法吧，目前就总结到这里，写给自己看，怕自己忘却。