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

所以我需要让我的背景网址图像响应。希望我说得对吗？

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

响应式背景图像CSS

1 个答案: