html - 如何设置span标签的背景图片，背景图片填充span的背景？

Question

我尝试设置 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;
}

.

Answer 1

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

background-size: cover;

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

background-size: 100% 100%;

可以在 CSS-Tricks 找到一个很好的例子和教程。