html/css-背景不一样清晰/绘制方式不同

我有一个简短的问题，也许这里有人能帮我

我试着在我的网站边栏中为一个模块创建3个不同背景的div。 现在我的问题是，上面和下面的画很模糊，而中间的画很尖锐

所有图像都应具有相同的高度/宽度和格式

谁能给我一个提示，如何使一切平等

这是我使用的代码：

这是一个截图：

html只是：

<div id="module_content_display_left_top"></div>
    <div id="module_content_display_left">
        some text
    </div>
<div id="module_content_display_left_bottom"></div>

一些文本

谢谢你的帮助；）

*编辑：

用JSFIDLE替换了pastebin链接

---

也许这有帮助，我仍然不知道如何修复它，只是问题似乎是固定高度/不重复

我的第一个猜测是，在没有看到实际背景图像的情况下，它们一开始就不清晰。图像应该相等，分辨率格式和位深相同（png文件，213x5 px，位深24）-有什么我可能错过的吗？你能用CSS达到你想要的效果吗？这些图像非常简单-边框、背景等。使用HTML和CSS进行创作吧！我正在尝试用css来完成它，我不想要效果，我只是希望它看起来一样；）-在没有任何运气的情况下摆弄了大约4个小时后，我在这里问道；）