css - 背景重复模糊图片的颜色？

Question

我目前正在尝试设计一些号召性用语按钮，并且我制作了一个动态宽度按钮，它由一个左右容器构建，然后是一个包含所有文本的中间容器。

中间的图片是 50 px 并且重复。

我的问题是，当图片 <=50px 时，背景图片中的绿色看起来是正确的。当它> 50px（并且背景图片正在重复）时，绿色似乎发生了变化。

有谁知道我做错了什么？

这是显示问题的两张图片：

编辑：

我这样做如下：

<a href="#">
    <div class="left"></div>
    <div class="middle">Link text here</div>
    <div class="right"></div>
</a>

我在 .left 和 .right 中的背景没有重复。我的背景图片仅在溢出时重复-当它溢出时，图片变为绿色。:-)

score -1 · Accepted Answer

你没有做错任何事。这是因为图像拉伸它模糊，而是尝试在具有适当背景颜色的 div 中使用您想要的 png 图像

这是一个例子

这是一个简单的html

<div class="cont">
<img src="http://www.iconsdb.com/icons/preview/moth-green/right-circular-xxl.png" class="img"/>

如果您有任何疑问，请告诉我