我有两个按钮,两个按钮在CSS中都有一个后台URL属性,因为当用户将鼠标悬停在它们上时,源会发生变化。这非常有效,但必须指定宽度和高度,因此会在响应设备上产生问题。删除高度和重量属性时,图片消失。 如何让我的图片在CSS中响应?下面的代码和来源。
其中一张图片的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);
}
图像:
答案 0 :(得分: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;
}
答案 1 :(得分:0)
a.sirscribe{
background:url(http://nikcooper.com/img/Box-sirscribe.png) center top no-repeat;
background-size: contain;
/* otherwise try
* background-size: cover;
* background-size: 100%;
*/
height:180px;
width:480px;
display:block;
margin: 0 auto;
}
a.sirscribe:hover{
background:url(http://nikcooper.com/img/Box-sirscribe-activated.png);
}