html - 响应式 CSS URL 背景图片

Question

我有两个按钮，这两个按钮在 CSS 中都有一个背景 URL 属性，因为当用户将鼠标悬停在它们上面时源会发生变化。这非常有效，但必须指定宽度和高度，因此它会在响应式设备上产生问题。当删除高度和体重属性时，图片消失了。 如何使我的图像在 CSS 中响应？下面的代码和源代码。

网站:http://parion.github.io/

其中一张图片的 HTML:

<a class="sirscribe" href="http://www.youtube.com/channel/UCaAlh3Iy7rAcO3MgD_O3Kkg?sub_confirmation=1"></a>

其中一张图片的 CSS:

a.sirscribe{
    background:url(http://nikcooper.com/img/Box-sirscribe.png) center top no-repeat;
    height:180px;
    width:480px;
    display:block;
    margin: 0 auto;
}
a.sirscribe:hover{
    background:url(http://nikcooper.com/img/Box-sirscribe-activated.png);
}

图片:

Answer 1

设置容器的大小(您的 a 元素)。您可以使用 max-width 和/或 max-height 使其响应。然后将其添加到 CSS:

a.sirscribe{
    background:url(http://nikcooper.com/img/Box-sirscribe.png) center no-repeat;
    background-size:contain;
    height:180px;
    width:480px;
    display:block;
    margin: 0 auto;
}