0

我正在尝试修改按钮以显示适合其大小的图像，这里的源代码

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

（我不得不把这段css放在这里，否则我无法链接jsfiddle）

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

请帮帮我！

谢谢

4

4 回答 4

3

像这样写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/

我修改了我的代码。

于 2013-07-19T13:30:30.990 回答
1

您需要添加尺寸 ( width:, height:)。元素不知道它们的背景图像有多大。

于 2013-07-19T13:24:39.967 回答
1

要对特定按钮应用更改，请给它们类，然后覆盖ui-btn.

演示

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

然后使用 jQuery 删除图标。

$('.mybtn span.ui-icon').removeClass('ui-icon ui-icon-shadow');
于 2013-07-19T21:07:34.433 回答
0

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

.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 中的图标并切换代码（擦除填充和边距），您的图像就非常适合。

于 2013-07-19T13:24:38.110 回答