1

サイズがわからない画像があり、次のことを行う必要があります。

  • 4:5 の画像にトリミングします。
  • 切り抜いた画像を 1:1 の 20 枚の画像に分割し、4x5 グリッドで尾を引いて画像全体を構成します

この jfiddle で行ったことを行う必要があります。

http://jsfiddle.net/j76Ke/

ただし、各セルの妥当性として設定された画像の一部を含む「背景画像」が必要なので、背景を表示するために単一のセルを非表示にできます

私は次のように思います：

.cell { background-image: url(data:mypartofimage); }

単一のセルを非表示にして背景を表示する必要があるため、フィドルのように背景を設定できません。これは動的コンテンツになります。

何かアドバイス？(PHPやサーバーサイドスクリプトが使えない)

編集:私のフィドルはこれです:
http://jsfiddle.net/LAWnx/

4

1 に答える 1

2

各セルに異なる背景画像を適用する代わりに、JS で行うことができます...セルに背景色を使用するだけです。

.grid .cell  {
    background-color:#ccc;
}

.grid .cell:hover {
    background-color:transparent;
}

デモ

本当に各セルに背景を適用したい場合は、いくつかの JS を使用してオフセットを計算し、 を使用して適用する必要がありますbackground-position。同じ画像になりますが、各ボックスに異なる部分が表示されます。

于 2013-02-21T19:05:30.643 に答える