CSS背景颜色开箱即用

Question

我对jQuery colorPicker插件触发器框的CSS有一个小问题。它使用背景图像。单击颜色触发器框并选择任何颜色时，它会将颜色显示为触发器框的背景。但背景颜色似乎从盒子里出来，使它看起来像相同颜色的边框。

背景图片大小为22x22像素，我可以通过定义小于22像素的盒子的高度和宽度来克服这个问题，但是这也隐藏了部分图像，我不希望这样做。我想保留图像的原始大小（即22px）。

这是jsfiddle链接，因为它是一个插件并且有很多额外的代码，所以我不会在这里粘贴它。

http://jsfiddle.net/HaFDF/1/

在这里你可以看到问题：

Answer 1

我刚刚玩过jsFiddle，看起来边框是图像的半透明部分。绕过这个并不难 - 你只需按照你的说法剪辑图像（我剪切到20px以删除所有4个边框），然后使用CSS重新应用边框。

我在这里用＃777边框嘲笑了这个：http://jsfiddle.net/HaFDF/3/

Answer 2

这只是因为风格的创建。该插件使用居中的背景图像（垂直和水平）。你可以做的是让你的选择器更小，以隐藏这个薄边框（使用20 * 20而不是22 * 22），并放置自己的边框。

如果您不想要这种颜色，请将此css用于miniColors-trigger：

.miniColors-trigger {
    height: 20px; //reduced from 22 to 20
    width: 20px; //reduced from 22 to 20
    border: 1px solid #a0a0a0; //put whatever you want
    background: url('http://labs.abeautifulsite.net/jquery-miniColors/images/trigger.png') center no-repeat;
    vertical-align: middle;
    margin: 0 .25em;
    display: inline-block;
    outline: none;
}

Jsfiddle updated here