Question

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

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 here所以你可以看到。（您可能需要扩展浏览器以使其在没有媒体查询的情况下正常工作）

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

Answer 1

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

在媒体查询中使用内联块的背景大小

1 个答案: