Question

我有一个带图像背景的div（内容区域），现在如果div高度扩展到600px以上，我想显示不同的背景图像。只有CSS才有可能吗？

Answer 1

简单回答：不。

更复杂的答案：这取决于。例如，您可以设置div容器的高度相对于视口的高度并调整其大小。在某些时候，div将增长到高度> 600px的。然后，您可以注意视口的高度，并根据值进行媒体查询。

@media (min-height: viewport-height when div is 601px high)
  your styles {}
}

如果该解决方案不是您想要的，那么您可以选择使用JavaScript查找div的高度，从而交换背景图像。

Answer 2

这是我给出的一个例子，尝试更改结果窗口的高度以查看更改：

.facet_sidebar{
    background: url('http://www.hexaware.com/brandresourcecenter/images/images_compass.png');
    height: 100px;
    width: 100px;
}


@media (max-height: 600px) {
  .facet_sidebar {
      background: url('http://www.hexaware.com/brandresourcecenter/images/images_gears.png');
    width: 100px;
  }
}

jsfiddle demo

媒体查询可用于更改任何内容。

希望有所帮助

Answer 3

是的，可以通过媒体调查

@media screen and (max-device-width: 768px) {
    .div {
            width: 960px;
        background: url(...);
    }
}

根据div高度交换背景图像

3 个答案: