1

絡み合った2つのトリッキーな問題があります。ボックスの 4 つの側面にインセット ボックスの影のビネットがありますが、影/ビネットが画像 (z-index: -1) の上にあるため、クリックできない画像があります。pointer-events: none の使用についていくつか読んだことがありますが、使用しようとするとボックス内のすべてに影響していると思うので、機能していません。これらの画像をクリック可能にする方法について何か提案はありますか?

また、ボックスの影を使用したスクロール速度に関する以前の投稿を読みました。私はできるだけ小さくしましたが、それをより速くする方法を誰かが考え出しましたか? 見た目はとても気に入っていますが、スクロールが非常に遅くなると機能が機能しません。

これまでに作成されたサイトへのリンクを次に示します。

http://www.official-design.com/TEST_PROJECT.html http://www.official-design.com/TEST_GRID.html

親切にしてください – 私はこれに関しては初心者です – 私は Web デザイナーではなく建築家です。アドバイスをいただければ幸いです。

4

2 に答える 2

0

なぜあなたはz-index: -1リンクを持っていますか？それを削除すると、リンクは正常に機能し、影は引き続き表示されます。

imgまたはa要素を含む ではなく、 要素にボックス シャドウを直接適用することもお勧めしtdます。

于 2012-11-14T02:33:23.150 に答える
0

ネガを削除してもz-index、インセット シャドウでは機能しません。必要なものを達成するには、次の 3 つのことを行う必要があります。

  1. ルールfloat: leftから余分なものを削除します。#makeMeScrollable div.scrollableArea imgこれは、<a> 要素が画像を適切にラップするようにするためです。
  2. ルールbox-shadowからプロパティを削除します。.SHADOW

  3. リンクに次の CSS を追加します。

    .SHADOW a {
  display: block;
  -webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.25);
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.25);
}

影が画像に重ねられるため、 のrgba代わりに valueを使用したことに注意してください。#ccc

補足として、すべて大文字でクラスに名前を付ける必要はありません。可読性が低下します。

于 2012-11-14T03:08:28.233 に答える