1

私はここに提示された効果がとても好きです：

http://rascals.eu/templates/rt0802/portfolios/portfolio-2-columns/

ただし、問題は、ソース コードを見ると何もないことに気付くことです。これはすべて jquery と次のように作成されたリンクを介して行われます。

<a href="xxx.jpg" rel="lightbox[portfolio]" style="width: 446px; height: 205px" class="autoload hover" data-image_url="yyy.jpg"></a>

おそらくバックグラウンドで作成され、ロード時にその場所に挿入される画像を使用します。

ただし、これは別の方法で、より標準に準拠した方法で可能ですか? もしそうなら、誰かがリソース/チュートリアルに向けて私を導くことができますか?

ありがとう。

編集：標準準拠とは、つまり：

img src が正しい場所を指しているため、js が無効になっている場合でも画像が表示されます。

4

2 に答える 2

7

あなたができる

img {
  display: block;
  background-image: url(...);
  background-position: center center;
}

使用する背景画像がキャッシュされている場合は、画像が表示される前に表示される必要があります。(背景が背後にあるため、透明な画像に注意してください。)

于 2011-07-20T12:08:35.583 に答える
0

ほとんどの場合、アリエルの方法が役立ちます。ただし、一部のブラウザは画像の読み込みを開始した後に背景を読み込んでいるため（imgタグ）、ウェブサイトの最初の読み込みでは、読み込み中の画像を表示できません。次回は、画像がキャッシュされ、ページの見栄えが良くなります。そして、すでに述べたように、この方法は透明でない画像に適しています。私は通常、自分で画像を読み込むときにこの背景テクニックを使用します:)

于 2011-07-21T16:30:52.727 に答える