html - 复合背景边框的奇怪行为

Question

请参阅此 fiddle 以获得我可以提供的最简单和最清晰的解释:http://jsfiddle.net/JRyJe/2/

在我工作的网站上，我在某些 div 周围创建装饰性边框。为了创建效果，我将许多背景图像合成在一起，每个 Angular 一个，加上一个 1px 宽的平铺边缘 block 来创建侧面。

三个中的两个完全按预期工作。但是这个，出于某种原因，边缘部分有颜色问题——颜色与背景颜色不匹配。我已经在 photoshop 中对边缘部分本身进行了三次检查(这里有一个 link 供您下载并亲自查看)并且图像中的颜色是正确的。

这是怎么回事？

代码，因为 SO 不喜欢 jsfiddle 链接:

HTML

<div id="about">
    <div class="deco_border">
         <h2>Why are those pinkish bars there?</h2>
    </div>
</div>

CSS

#about .deco_border {
    padding: 110px;
    background: url('http://web.fildred.com/images/about_border/NWcorner.jpg') no-repeat,
                url('http://web.fildred.com/images/about_border/SWcorner.jpg') left bottom no-repeat,
                url('http://web.fildred.com/images/about_border/SEcorner.jpg') right bottom no-repeat,
                url('http://web.fildred.com/images/about_border/NEcorner.jpg') right top no-repeat,
                url('http://web.fildred.com/images/about_border/Nborder.jpg') repeat-x,
                url('http://web.fildred.com/images/about_border/Wborder.jpg') repeat-y,
                url('http://web.fildred.com/images/about_border/Sborder.jpg') bottom repeat-x,
                url('http://web.fildred.com/images/about_border/Eborder.jpg') right repeat-y,
                #c00d13;
}

Answer 1

这似乎是你的图片(即使你说你已经检查过了)。如果我在源头查看您的图像，则存在颜色问题

http://web.fildred.com/images/about_border/SWcorner.jpg