表单提交按钮@ Transparent CSS Sprites

时间:2012-01-11 17:53:30

标签: css button hover submit sprite

所以我试着设置一个提交按钮的样式。背景来自透明的png精灵文件。 完成所有操作后,按钮显示为白色框,并且未加载精灵图像。

<input name="Submit" type="submit" value="" class="lp-submit"/>

CSS

.lp-submit {
    vertical-align:middle;
    width:106px; 
    height:47px; 
    background:transparent url(images/bt_sprite.png) no-repeat 0 0;
    border:none;
    cursor:pointer;
}

.lp-submit:hover {
        background:transparent url(images/bt-sprite.png) no-repeat 0 25;
}

图像显示“透明是否从背景中移除:当它再次放回白色框时。

2 个答案:

答案 0 :(得分:0)

检查图像的相对路径。 CSS从它所在的文件夹中查找相对路径,而不是从文档根目录查找。为什么要削减?

答案 1 :(得分:0)

网址必须是字符串。尝试将其括在撇号或引号中(例如url('images/bt_sprite.png');)。此外,您在图像的路径中有一个双斜杠。由于url的值是一个字符串,因此您不需要(也不应该)转义斜杠。