css - 使用移动设备的悬停选择器调整链接/ div 的大小

Question

我正在尝试针对移动设备优化以下网站： http ://whitehallrow.com/

蓝丝带链接功能通过使用 CSS 悬停选择器在悬停时更改图像：

.ribbonlinkA{
    background-image:url("/wp-content/uploads/2013/05/hr_slide_off.png");
    display:block;
    height:86px;
    width:512px;
}
.ribbonlinkA:hover{
    background-image:url("/wp-content/uploads/2013/05/hr_slide_on.png");
    display:block;
    height:86px;
    width:512px;
}

我一直在为页面上的图像使用 width:100%，这可以在我的 Blackberry 上很好地调整它们的大小。但是，我根本无法调整功能区链接的大小；它们只是从页面的右侧溢出，即使宽度为：100%。

我怎样才能让他们适当地调整大小？

Answer 1

您必须使用该background-size属性（并非所有浏览器都支持该属性）来缩放 CSS 背景。对于像您正在使用的较大图像（> 320px），您可能最好使用<img>元素，使用javascript切换。