EXTJS系列笔记(4.x)————button中的大背景图片问题

最新推荐文章于 2021-01-12 22:21:54 发布

阿尔卑斯0283

最新推荐文章于 2021-01-12 22:21:54 发布

阅读量557

点赞数

CC 4.0 BY-SA版权

分类专栏： extjs 文章标签： extjs

本文链接：https://blog.youkuaiyun.com/java_dotar_01/article/details/86519347

extjs 专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何通过CSS来优化ExtJS按钮的显示效果，包括调整背景图片位置和实现鼠标悬停时的动态效果。文章详细展示了如何设置按钮的高度、宽度、边框、字体大小及响应事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为button中的icon是用来加载小图标的，
所以当你要加载整张图作为button的背景
的时候你最好用css效果
     例如：
1.js代码
{
       xtype: 'button',
     height: 90,
      width: 100,
      style:{
       border:'none'
       },
       text: '<font size="4px">地图页面</font>',
       cls: 'welcome-consoleClient-map-button', //这里就是用到了css效果，主界面也要
                              //引入css文件
       x: 100,
       y: 30,
       overCls:'welcome-consoleClient-button-over',//这里是当鼠标时候的css效果
       listeners:{
            'click':function(){
                 window.location.href="../mapFrame/mapFrame.jsp";
          }
     }
}
2.css代码（这里产生的效果是鼠标移上去的时候图标会跳一下）
.welcome-consoleClient-map-button
{
   background-position: center;
   background-image:url(../../img/welcome/Img_btn.png) !important;

}

.welcome-consoleClient-button-over
{
        background-position: top;
}