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;

到你的a.share_fb班级。这应该使背景图像缩放到元素的整个高度（不是因为文本的宽度）。

于 2012-04-17T13:37:27.707 回答
1

background-size: contain;（或值，百分比，像素等）适用于 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;}

Click here to see it in action - change the width and height of the anchor. Change the image width and height to 100% for thefull size

Link also includes css3 version

于 2012-04-17T13:42:37.987 回答