0

我正在设计一个响应式网站和一个链接列表，每个链接都有背景图片。链接是内联块级元素。

HTML

<li id="tab3"><a href="#dinner" class="current">Dinner</a></li>

CSS

#tabs .nav li { display: inline; }
#tabs .nav li a {display: inline-block; width:165px; height:165px; line-height:160px;}
#tabs .nav li a.current{background: url(image) no-repeat -342px 0;}

在某个断点（600 像素）处，按钮的大小变小，因此背景图像不再适合。通常，我会使用 background-size: 100% 来确保背景图像适合其容器的大小。在这种情况下，它不起作用。

@media only screen and (min-width: 0) and (max-width: 600px){
  #tabs .nav li a{width: 136px; height: 136px; line-height: 131px; }
  #tabs .nav .current{background-size: 100%!important}
}

我在这里设置了一个jsfiddle，所以你可以看到。（您可能需要将浏览器拉宽才能看到它在没有媒体查询的情况下工作）

在 600px 处有一个断点。超过 600 像素，您将看到文本后面的背景图像。下面，它消失了。这是因为我将背景大小设置为 100%。由于某种原因，这会完全删除背景图像。知道如何解决这个问题吗？

4

1 回答 1

0

在元素的 100% 处，背景大小变为 136px 宽，您的原始background声明将其向左移动 342px，这意味着它在元素中不可见。我不确定你的最终意图是什么，但你必须改变background-position它才能让它出现。

于 2013-05-30T17:53:08.060 回答