CSS推拉门背景图像问题

我注意到我不是第一个问CSS滑门的人。然而,这似乎(至少在我看来)是一个相当奇怪的问题,我没有看到答案。

尝试创建一个简单的圆角链接按钮:

HTML:

<a href="#"  class="link_button"><span>Add A New Somthing</span></a>

CSS:

    .link_button {
        background: transparent url('img/backgrounds/bg-buttonRight.png') no-repeat scroll top right;
        color: #444;
        display: block;
        float: left;
        font: normal 12px arial;
        height: 41px;
        margin-right: 6px;
        padding-right: 14px; 
        text-decoration: none;
    }

    .link_button span {
        background: transparent url('img/backgrounds/bg-buttonLeft.png') no-repeat top left;
        display: block;
        line-height: 31px;
        padding: 5px 0 5px 14px;
    }

    .link_button:active {
        background-position: bottom right;
        color: #000;
        outline: none; 
    }

    .link_button:active span {
        background-position: bottom left;
        padding: 6px 0 4px 18px; 
    }

结果:

alt text http://www.codefruition.com/sandbox/img/buttonProblems/problemImageOne.jpg

这两个图像是重叠的,这是我想要的,但为什么会变色?为什么会更暗?我尝试使用PNG JPG、GIF,有无透明度。

我 posted the code here 以及另一种尝试,只使用一个JPG而不是两个JPG,但结果仍然相同。

我错过什么了吗?

事先谢谢。