FineUI 官方论坛

标题: button按钮设置背景图片的问题 [打印本页]

作者: 簫今Shawgin 时间: 2013-8-16 11:56
标题: button按钮设置背景图片的问题
.btnlogin {
margin-top:25px;
display:block;
background:url("../images/loginbutton.png") no-repeat;
height:50px;
width:320px;
}
上面是这个按钮的样式，但是设置后按钮的左上角还是保留着原先的按钮的默认背景颜色，想问下这个怎么去掉呢？设置IconUrl这个没起作用，在论坛查了一下只能在样式里设置，大家有更好的方法吗？

作者: sanshi 时间: 2013-8-16 12:08
能够把你的这个 loginbutton.png 上传一下，我来写个例子

作者: 簫今Shawgin 时间: 2013-8-16 12:10
附件，请查收。。。。

作者: 簫今Shawgin 时间: 2013-8-16 13:18
根据IE的调试，可以知道，左上角那一块按钮，是生成后tbody的内容，查了一下资料，Extjs的按钮一样是由table组成，也就是说一个Extjs按钮被分成上中下三行，然后每一行又被分成左中右三部分，这个应该是在控件button的样式里写好的，我在想能否自己重写这个样式用来代替呢，那又该如何写呢？

作者: 簫今Shawgin 时间: 2013-8-16 13:57
通过IE调试分析，左上角没有去掉的那部分在源代码里面是生成table tr td里面的内容的，并且每一个td里面都有一个class的样式控制，这个样式控制来源于extjs路径下res/css/blue.css这个文件，所以我们在自己的样式文件里面可以重写这些样式，如下：
.x-btn-tl, .x-btn-tc, .x-btn-tr,.x-btn-ml,.x-btn-mc,.x-btn-mr,.x-btn-bl,.x-btn-bc,.x-btn-br {
display:none;
}
我这样写是将这些table里面的背景块隐藏起来，一样达到效果，终于得到解决了

作者: sanshi 时间: 2013-8-16 14:29

簫今Shawgin 发表于 2013-8-16 13:57
通过IE调试分析，左上角没有去掉的那部分在源代码里面是生成table tr td里面的内容的，并且每一个td里面都 ...

是的，其实就是覆盖原来的CSS。
我也写了一个例子，可以参考：http://fineui.com/demo/#/demo/button/button_custom.aspx

作者: luoweiliuz 时间: 2013-12-17 14:21
很好谢谢分享，学习了

作者: treedun 时间: 2013-12-25 09:27
不错，界面里正好用到，借用你的图片了哈

作者: Min 时间: 2013-12-26 08:50
学习了~~~~~~~

欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/)