Question

我尝试设置跨度标记的背景图像，即背景图像填充跨度的背景。

跨度的大小是可变的。

跨度背景不应重复

<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;
}

Answer 1

您可以使用background-size属性来实现此目的

background-size: cover;

这会将给定图像缩放/裁剪为跨度的大小。或者您可以使用其他变体：

background-size: 100% 100%;

可以在CSS-Tricks

找到一个很好的示例和教程

如何设置跨度标签的背景图像，背景图像填充跨度的背景？

1 个答案: