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/