我有两个按钮,两个按钮在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);
}


图片:

最佳答案

设置容器的大小(您的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;
}

10-06 04:00