Question

我正在尝试修改按钮，以便显示符合其尺寸的图片，the source code here

.ui-icon-myimg {
background: url(http://www.metalunderground.pt/download/file.php?avatar=2015_1331126201.jpg) no-repeat;}

（我不得不把这个css放在这里因为否则我无法链接jsfiddle）

为什么我只能看到橙色圆圈？我已经尝试过修改宽度和高度，但我找不到任何工作方式。

请帮帮我！

由于

Answer 1

写css赞：

.ui-controlgroup .ui-btn-icon-notext .ui-btn-inner .ui-icon {
position: absolute;
right: 0;
left: 45%;
top: 40%;
margin: -9px -9px 0 0;
}

.ui-btn-inner {
height: 100% !important;
padding: .55em 11px .5em 11px;
}

.ui-controlgroup-controls li a {
position: relative !important;
}

看到这个小提琴： http://jsfiddle.net/yWkGR/52/

我修改了我的代码。

Answer 2

您需要添加尺寸（width:，height:）。元素不知道他们的背景图像有多大。

Answer 3

要对特定按钮应用更改，请为其指定类，然后覆盖ui-btn的属性。

<强> Demo

.mybtn .ui-btn {
  background: url(image.jpg) center no-repeat;
}

然后使用jQuery删除图标。

$('.mybtn span.ui-icon').removeClass('ui-icon ui-icon-shadow');

Answer 4

首先关闭图片对于图标来说太大了。您必须输入图标图像和框的大小。您的下面的类别必须具有正确的尺寸。

.ui-icon ui-icon-myimg ui-icon-shadow{
   width: 50px;
   height: 50px; // or whatever size the icon is 
}

您需要将CSS表更改为：

.ui-btn-inner {
  height: 120px;
  padding: 0.55em 11px 0.5em;
  width: 120px;
}

.ui-icon {
  height: 120px;
  width: 120px;
}

如果右键单击firebug中的图标并切换代码（擦除填充和边距），则图像非常合适。

如何在jquerymobile中的按钮中放置图像

4 个答案: