Question

所以我试着设置一个提交按钮的样式。背景来自透明的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;
}

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

Answer 1

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

Answer 2

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

表单提交按钮@ Transparent CSS Sprites

2 个答案: