Question

我注意到我不是第一个询问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而不是两个，但结果仍然相同。

我错过了什么吗？

提前致谢。

Answer 1

你的问题不是你的CSS。这是因为在CSS中使用而生成的图像并不是无缝的。边缘颜色较深，不会在小于14px的范围内淡出，即右侧门的宽度。

按钮上似乎有一个斜面或内部阴影。如果您是设计师并拥有Photoshop文档，请检查按钮上的样式是什么;你可能不得不缩小上述款式。

Answer 2

ethyreal，这两个图像是完全不同的颜色，因此变色。我建议你亲自尝试自己动手做。

在Photoshop或某种形式的图像编辑软件中分别打开bg-buttonLeft.png和bg-buttonRight.png，然后将bg-buttonRight.png放在bg-buttonLeft.png上，你应该注意到这两种颜色实际上是不同的颜色。

如果仍然看不到它，请垂直上下移动头部，以便从不同角度观察显示器。

Answer 3

您使用Safari在Mac上吗？ Mac的1.8伽玛值与Windows2.2伽玛值不匹配（文件创建）。这已在Snow Leopard中修复，现在默认为2.2。

尝试在Firefox中预览并告诉我们它是否相同？

Answer 4

您的图片的透明度设置为按钮。看看你的图层 - 可能它设置为90％透明度或其他东西。当它们重叠时，你会在重叠图像上变暗一点吗？

CSS推拉门背景图像问题

4 个答案: