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>

TIA，丽娜

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）以所需的大小提供图像。

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

1 个答案: