css - 响应式背景图片 CSS

Question

我有一个类似于在 dribbble.com 上找到的屏幕截图的屏幕截图类，当我将鼠标悬停在它上面时，我会显示一个链接图标。我让它响应直到我的背景图像(链接图标)保持相同大小的部分，当我缩小其余部分时它看起来真的很大。

当我缩小浏览器时，如何确保链接图标类的背景 img 也缩小？

.screenshot .link-icon {
    background: url("../img/icons/link.png") #fff no-repeat 50% 50%;
    position: absolute;
    padding: 8.02139037433155%;
    border-radius: 100%;
    position: absolute;
    z-index: 1;
    top: 39%;
    left: 42.25352112676056%;
}

所以我有点需要让我的背景 url 图片响应。希望我说的对吗？

Answer 1

您需要为此目的定义高度:

.screenshot .link-icon {
    background: url("../img/icons/link.png") #fff no-repeat 50% 50%;
    position: absolute;
    padding: 8.02139037433155%;
    border-radius: 100%;
    position: absolute;
    z-index: 1;
    top: 39%;
    left: 42.25352112676056%;
    height: 1em;
}