Question

请看这个小提琴，我可以提供最简单，最干净的解释：http://jsfiddle.net/JRyJe/2/

在我正在研究的网站上，我正在围绕某些div创建装饰边框。为了创建效果，我将许多背景图像合成在一起，每个角落一个加上1px宽的平铺边缘块以创建边。

三个中的两个完全符合预期。但是，由于某些原因，这个边缘部分有颜色问题 - 颜色与背景颜色不匹配。我已经在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

复合背景边框的奇怪行为

1 个答案: