根据 div 高度交换背景图像

Question

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

Answer 1

这是我

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

.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 演示

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

希望对你有帮助

Answer 2

简单的答案：不。

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

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

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

Answer 3

是的，可以通过媒体查询

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