Question

我有这个css代码，显示两次照片，很奇怪，有没有更好的我可以写这个，链接用于使用jQuery投票？

css代码：

a.vote_up, a.vote_down {
        display:inline-block;
    background-repeat:none;
    background-position:center;
        height:30px;
    width:30px;
    margin-left:4px;
    text-indent:-900%;
}

a.vote_up {
    background:url("images/uparrow.png");
}

a.vote_down {
    background:url("images/downarrow.png");
}

HTML：

<span class='vote_buttons' id='vote_buttons<?php echo $row['id']; ?>'>
    <a href='javascript:;' class='vote_up' id='<?php echo $row['id']; ?>'>Vote Up!</a>
    <a href='javascript:;' class='vote_down' id='<?php echo $row['id']; ?>'>Vote Down!</a>
</span>

Answer 1

尝试将background-repeat: no-repeat;添加到a.vote_up和a.vote_down。默认情况下，将重复背景。

Answer 2

使用background，您将覆盖第一个样式定义中的重复和位置设置。

改为使用background-image：

a.vote_up, a.vote_down {
    display:inline-block;
    background-repeat:no-repeat;  //changed to no-repeat
    background-position:center;  
    height:30px;
    width:30px;
    margin-left:4px;
    text-indent:-900%;
}
                  // background-image to prevent overwrite 
a.vote_up {       //    of background-repeat & background-position
    background-image:url("images/uparrow.png"); 
}
a.vote_down {
    background-image:url("images/downarrow.png");
}

background-repeat应为no-repeat。

css显示图像两次反对一次？

2 个答案: