0

HTML (CSS を使用) では、次のコードを使用して、背景画像 (リンクの左側の画像) を持つリンクのリストを作成します。

HTML:

<ul>
    <li><a class="share_fb" href="#">Like on Facebook</a></li>
    <li><a class="share_tw" href="#">Share on Twitter</a></li>
    <li><a class="share_gp" href="#">+1 on Google Plus</a></li>
</ul>

CSS:

a {
    font-size: 1.4em;
}
a.share_fb {
    background: transparent url(images/share_fb.png) scroll no-repeat left center;
    padding: 0.1em 0 0.1em 0.4em;
}
...

問題は、ページ全体をスケーラブルにするために最善を尽くしていることです。しかし、背景のグラフィックに関して言えば、これをどのように行うべきでしょうか? これらの背景画像に最適なサイズはどれですか? それらはテキスト行よりも大きくないかもしれませんが、テキストがそうするときに拡大縮小する必要があります。

4

2 に答える 2

1

background-size: contain;(または値、パーセント、px など) は CSS3 で機能します。

それ以外の場合、CSS2 (IE8 など) の場合、配置が必要です。

HTML:

<div id="container">
    <a href="#" class="img">
        <img src="http://www.google.co.uk/images/srpr/logo3w.png" /><span>Google</span>
    </a>
</div>

CSS:

#container{width:200px; height:200px; background:red;}
a{display:block;position:relative; width:150px; height:150px; background:yellow;}
a img{display:block; position:relative; width:50%; height:50%;}
a span{display:block; position:absolute; background:green; top:10px; left:10px;}

ここをクリックして実際の動作を確認してください- アンカーの幅と高さを変更してください。フルサイズの画像の幅と高さを 100% に変更します

リンクにはcss3バージョンも含まれています

于 2012-04-17T13:42:37.987 に答える
1

追加してみてください：

background-size: contain;

あなたのa.share_fbクラスに。これにより、背景画像が要素の高さ全体に拡大縮小されます (テキストのため幅ではありません)。

于 2012-04-17T13:37:27.707 に答える