如何将背景图像适合包含的锚元素？

Question

我正在尝试设计一个带有图像背景的链接,问题是图像是否太大,我如何使用css将其与锚点的宽度和高度相匹配？

<a href="#"></a>
<style>
 a
 {  
    display: block;
    padding: 5px 12px;
    border: 1px solid black;
    width: 10px;
    height: 10px;
    background-image: url('/Scripts/images/downarrow_blue.png');
    }
</style>

蒂娜,丽娜

Answer 1

CSS 2.1中的背景图像无法调整大小,尽管CSS 3支持该background-size属性但未广泛实现.

background-size: 10px 10px;

显而易见的替代方法是使用<img>标签:

<a href="#"><img src="mybg.png" alt="" style="width:10px; height:10px" /></a>    

但是你可能有理由不这样做,对吧？

其他替代方案可能是

• 请将<a>元素大小调整为图像的大小.
• 在本地调整图像大小并以不同的文件名上传.
• 使用服务器端预处理器(如PHP或ASP)以所需大小提供图像.