Html 单选按钮的css背景图像未显示

我有这个css代码：

input[type=radio] {
  opacity: 0;
  float: left;
  width: 25px;
  margin: 0;
  clear: none;
  padding: 5px 0 4px 24px;
  cursor: pointer;
  background-image: url(../images/off.png) left center no-repeat; 
}

input[type=radio]#male:checked {
  background-image: url(../images/radio-male.png) left center no-repeat; 
}

input[type=radio]#female:checked {
  background-image: url(../images/radio-female.png) left center no-repeat; 
}

---

不管我做什么，我都无法让图像显示出来。我查看了chrome中开发者工具的网络选项卡，它看起来好像连图像都没有发送到浏览器，这很奇怪，因为我肯定url是正确的。任何提示或提示都将不胜感激。

您使用的是

背景图像

，它应该只指定图像的url。如果要在同一行中指定定位/重复，请将其更改为just

background

例如：

background: transparent url('../images/radio-female.png') left center no-repeat;

如果需要颜色和图像，请更改透明

另外，您似乎无法设置收音机输入本身背景的样式，但是您可以通过设置标签样式，然后使用填充将背景置于左侧来实现相同的效果。请参见我的示例：

---

我想这是因为你的不透明度设置为0。 当我移除它时，它似乎显示了单选按钮： 如果这不起作用，你能提供目录结构的详细信息吗？按照您当前的css布局方式，我预测您的结构如下：

---

index.html、image、css等等

我很确定大多数浏览器都不支持这一功能。你需要创建一个自定义的渲染方法，我见过一些人隐藏复选框，然后添加一个图像来保存选中的图像，然后更改复选框

大概是这样的：

---

我建议您使用ready

jQuery插件来实现这一点。在我看来，这将是一种更好、更优雅的方式。这对你来说也会更容易

例如，您可以使用：

关于：统一

“您是否曾希望能够设置复选框、下拉菜单、单选按钮和文件上载输入的样式？是否曾希望能够在所有浏览器之间控制表单元素的外观？
如果是这样，制服就是你最好的新朋友。
Uniform使用自定义主题控件屏蔽标准表单控件。它与真实表单元素同步工作，以确保可访问性和兼容性。”

有很多插件，你可以得到你想要的。

我希望有帮助

问候,

John。
这是因为不透明度设置为0。我假定您这样做是因为您想要一个自定义蒙皮单选按钮，所以您使用不透明度来隐藏本机控件，希望在状态更改时背景图像会更改。要实现您想要的，您需要将背景图像放在包含图像上，并使用连接到change或单击单选按钮上的events的javascript更新背景。或者完全隐藏本机控件并使用javascript对其进行操作

我建议您使用这样一个插件，它将为您完成所有艰苦的工作，让您根据自己的意愿更改css：

另一个注意事项是，如果您的方法确实有效，我建议使用css精灵来更改图像的背景位置，而不是更改源图像本身，因为在下载新图像时会出现明显的延迟/闪烁
 尝试使用绝对url。你能创建一个提琴吗？就像乔说的，试试绝对url。你确定吗？确保去掉不透明度：0，然后它就会工作。如果它不起作用，请尝试删除不透明度：0并重新运行OK，如果我去掉不透明度0，它在IE中起作用，但在chrome中不起作用，这没有得到广泛支持。它需要通过JS而不是CSSsorry来修复，我应该更详细，我已经尝试过背景，背景图片，背景颜色，url单引号和双引号，没有任何区别。。。我真的被这件事难住了我希望这是一个简单的解决办法，但我想没有这样的运气！我在我的答案中添加了一些更详细的内容，其中有一个选项用于设置标签样式，而不是输入本身。希望有帮助！我知道这已经很旧了，但是谢谢你的帮助！这正是我需要的！我已经找了一个月了！好吧，我从一个图坦卡蒙那里得到了这个方法，这个方法一定是在幕后做js的，这就是为什么它不能工作的原因。谢谢你的回答。我会试试看，让你知道进展如何