如何设置span标签的背景图像，使其填充整个span标签的背景？

Question

如何设置span标签的背景图像，使其填充整个span标签的背景？

3

我试图设置span标签的背景图像，使其填充span的背景。span的大小是可变的。span的背景不应重复。

<span class="link-shape" ></span>

CSS：

.img-rectangular .link-shape {
    background-image: url(images/icon-link.png);
    position: absolute;
    top:  35%;
    left: 35%;
    height: 20%;
    width:  20%;
    z-index:-1;
}

.img-rectangular:hover .link-shape {
     z-index:100000;
}

.

- hmahdavi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- samuelmr · Accepted Answer

您可以使用background-size属性来实现这一点。

background-size: cover;

这将把给定的图像缩放/裁剪到span的大小。或者您可以使用另一种变体：

background-size: 100% 100%;

一个很好的关于此的示例和教程可以在CSS-Tricks找到。