CSS背景颜色开箱即用

Question

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

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

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

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

在这里你可以看到问题：

Answer 1

这只是因为款式是为创建。该插件使用居中的背景图像（垂直和水平）。你可以做的是让你的选择器小主人隐藏这个薄边框（使用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

Answer 2

我刚刚用的jsfiddle一出戏，它看起来像边境是半 - 图像的透明部分。这并不难 - 你只需按照你所说的剪裁图像（剪裁到20px以去除所有4个边框），然后使用CSS重新应用边框。

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