3
我正在为客户端开发一个应用程序,并试图创建一个带有完全自定义图标的按钮。图标是30px x 30px,中间是透明的。使用自定义图标在jQuery Mobile中创建按钮
我已经几乎实现了我想用一下这个CSS代码:
/* info button override */
.ui-icon-info-page {
background: url(images/G_help_icon_round.png) 50% 50% no-repeat;
background-size: 30px 30px;
background-color: black;
}
但是,里面的图标会出现一个瘦黑圈,也该图标图像看起来被剪除
我想删除此圆圈并阻止图标?从被切断。此外,我希望问号是透明的而不是黑色,以显示导航栏的图像。如果我尝试将背景色设置,虽然透明,按钮上显示全白:
我怎样才能做到这一点?
更新:
我试图将这种代码:
/* info button override */
.ui-icon-info-page {
background: url(help.png) 50% 50% no-repeat;
background-size: 30px 30px;
width: 30px;
height: 30px;
margin-top: -15px !important;
box-shadow: none;
-webkit-box-shadow: none;
}
,得到了这样的结果:
我能够通过调整顶部四周移动图标并留下边距,但边缘在以黑色圆圈为中心的框架外部被切断:
更新2:
这里是我使用的(请注意,它是无形的在这里,因为它是在白色背景上的白色按钮)按钮:
这里是我用来加载按钮的html代码:
<div data-role="header" data-position="fixed">
<div><img border="0" src="images/G_iphone_navbar_logo.png" style="display:inline;"/> </div>
<a href="index.html" data-icon="refresh" class="ui-btn-left" data-transition="fade" data-iconpos="notext" data-theme="a"></a>
<a href="info.html" data-icon="info-page" class="ui-btn-right" data-transition="flip" data-iconpos="notext" data-theme="a"></a>
</div>
感谢您的建议,但它并没有很好的工作。我已经更新了我的问题。我在jquery mobile css之后加载了这个页面的css(除非我不明白幕后发生了什么)。 – Darren
你可以在任何地方用你正在使用的实际图标托管代码的机会吗?然后我可以看看并试图找出问题。只需单独使用该按钮的代码即可。 – user700284
我不确定我是否了解你,但我想你是要求我上传按钮图片。我将它添加到问题中 - 注意它不可见,因为它是白色背景上的白色按钮,但如果右键单击问题中的空间,您将可以保存它。谢谢你的帮助! – Darren