2

围绕我的问题有几个问题，但没有一个答案与我正在尝试做的事情有关。我通过使用锚标记上的类来为我的网站徽标使用精灵。问题是我必须定义像素高度和宽度，这会阻止徽标响应。

这是HTML：

<a href="<?php echo get_option('home'); ?>/" class="logo-sprite"></a>

这是CSS：

a.logo-sprite {
    background: url('image_here.jpg') 0 0;
    display: block;
    width: 450px;
    height: 130px;
}

a.logo-sprite:hover {
    background: url('image_here2.jpg') 0 -140px;
}

有什么想法吗？谢谢。

4

2 回答 2

0

这是正确的。由于精灵，根据定义仅适用于固定尺寸（它们毕竟是图像），它们不能“流畅”地用于流体/响应式布局。

只要您不断调整媒体查询中的每个“级别”，它们就可以用于响应式布局。

于 2012-11-26T21:31:16.613 回答
0

好吧，我有个主意。

您可以使用该background-size属性将精灵“锁定”到位并停止显示比您想要的更多/更少。这是一个基本的例子：

background-position: 0px 0px;
background-repeat: no-repeat;
background-size: 190% 140%;

这里唯一的问题是图像的大小与Divs 和锚点等元素不同，因此高度不会动态缩放。我相信实现这一目标的唯一方法是使用 JavaScript，但我可能错了。

下面是一个粗略的例子，说明你如何开始这样的事情：http: //jsfiddle.net/VW2dW/16/ 如果你调整浏览器的大小，你会注意到它成功地水平缩放但不是垂直缩放，这是一个问题。

于 2012-11-26T21:41:28.757 回答