CSS推拉门背景图片问题答案

【问题标题】：CSS sliding door background image problemCSS推拉门背景图片问题
【发布时间】：2013-01-01 23:43:31
【问题描述】：

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

我错过了什么吗？

提前致谢。

【问题讨论】：

标签： css

【解决方案1】：

您的问题不在于您的 CSS。这是为在 CSS 中使用而生成的图像不是无缝的。边缘颜色较深，不会在小于 14 像素（右侧“门”的宽度）内淡出。

按钮上似乎有斜面或内阴影。如果您是设计师并且拥有 Photoshop 文档，请检查按钮上的样式；您可能需要缩小上述样式。

【讨论】：

【解决方案2】：

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

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

如果仍然看不到，请垂直上下移动头部，从不同的角度查看您的监视器。

【讨论】：

它是从同一张图片中剪下来的。我只使用一张图片尝试了同样的事情。问题出在图像的渐变、斜面和内阴影上。不过谢谢。
是的，如果您调整（裁剪）PSD 文件的大小，然后将其保存为 JPEG、GIF、PNG 等格式，就会发生这种情况。我确信有一种更有效的方法，但我这样做的方式它实际上是将整个文件本身保存为PNG-24，然后打开该文件对其进行切片，这意味着您添加的效果不会倾斜。

【解决方案3】：

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

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

【讨论】：

Firefox 也是这样，我现在正在看。
我在 Mac 上（雪豹）。我检查了firefox和safari。我也通过vmware检查了windows ie7和firefox，还是一样

【解决方案4】：

您的图片为按钮设置了透明度。看看你的图层——也许它被设置为 90% 的透明度或什么的。当它们重叠时，重叠图像会变暗吗？

【讨论】：