在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;
}
...
问题是:我尽力使整个页面可扩展。但是当涉及到背景图形时:应该如何做到这一点?哪种尺寸最适合这些背景图像?它们可能不大于文本行,但应该在文本时缩放。
答案 0 :(得分:1)
尝试添加:
background-size: contain;
到你的a.share_fb
课程。这应该使背景图像缩放到元素的整个高度(因为文本而不是宽度)。
答案 1 :(得分: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;}
Click here to see it in action - 更改锚点的宽度和高度。将图像宽度和高度更改为100%(完整尺寸)
链接还包括css3版本