0

jQuery colorPicker プラグイン トリガー ボックスの CSS に小さな問題があります。背景画像を使用しています。カラー トリガー ボックスをクリックして任意の色を選択すると、その色がトリガー ボックスの背景として表示されます。しかし、背景色はボックスから出てきたようで、同じ色の境界線のように見えます。

背景画像のサイズは 22x22px です。ボックスの高さと幅を 22px よりも小さく定義することで、この問題を何とか克服できますが、それによって画像の一部が隠れてしまうので、そうしたくありません。画像の元のサイズ (つまり 22px) を維持したいと思います。

これはプラグインであり、余分なコードがたくさんあるので、ここには貼り付けません。

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

ここで問題を見ることができます：

ここに画像の説明を入力

4

2 に答える 2

3

jsFiddle で遊んだところ、境界線が画像の半透明の部分のように見えます。これを回避するのは難しくありません.あなたが言ったように画像を切り取るだけです.

ここで #777 ボーダーでこれをモックしました: http://jsfiddle.net/HaFDF/3/

于 2012-07-30T07:25:02.733 に答える
1

それは、スタイルが作成されたからです。プラグインは、中央揃えの背景画像を使用しています (垂直方向と水平方向の両方)。できることは、ピッカーを小さくしてこの細い境界線を隠し (22*22 の代わりに 20*20 を使用)、独自の境界線を配置することです。

この色が必要ない場合は、次の 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

于 2012-07-30T07:16:58.887 に答える