こんにちは私は「背景画像」を使用して、横向きまたは縦向きのサムネイルの単純なグリッド(2x3)を作成しています。これはうまく機能します。ただし、ホバー時に高解像度の画像にスケールアップしてほしい。高解像度のものは何らかの方法で隠す必要があると思います。ありがとう
質問する
626 次
2 に答える
2
background-size:
これは、CSS3のプロパティを使用して行うことができます。
単純なHTML:
<div class="wrapper">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<span class="clear"></span>
</div>
CSS:
.wrapper
{
width: 300px;
height: 200px;
}
.thumb
{
background: url(http://placehold.it/100x100) no-repeat;
background-size: 50% 50%; /*CSS3*/
background-position: 50% 50%;
width: 100px;
height: 100px;
float: left;
-webkit-transition: background-size 1s; /*CSS3*/
-moz-transition: background-size 1s; /*CSS3*/
}
.thumb:hover
{
background-size: 100% 100%;
-webkit-transition: background-size 1s; /*CSS3*/
-moz-transition: background-size 1s; /*CSS3*/
cursor: pointer;
}
span.clear
{
display: block;
height: 0;
width: 100%;
clear: both;
}
高解像度の画像をすぐに提供し、background-size:
プロパティを使用して縮小します。次に、ホバーすると画像を拡大します。これにより、各画像の2つのバージョンが読み込まれなくなり、CSS3トランジションを使用するとかなりクールに見える可能性があります;)
これはCSS3であるため、(私が思うに)IE8以下はこれをサポートしないことを忘れないでください。
于 2012-11-21T09:25:13.443 に答える
1
これがカイルの答えの修正です。それがあなたのニーズに合うかどうかはわかりませんが(使用しないbackground-image
で、タグだけを使用します<img>
)、誰かがそれを便利だと思った場合に備えて投稿します。バックグラウンドサイジングを使用する代わりに、CSS3トランスフォーム(scale
この場合)とトランジションを使用することもできます。
于 2012-11-21T09:37:39.900 に答える