Question

当屏幕尺寸大于1024像素时，我想在我的网站上设置边框和背景。

我在我的代码中使用了这个：

(max-width: 1024) { background-image: url("Gutter.png"), url(Background.png);
        background-position: left, center;
    }

但即使在大于1024像素的屏幕中也只显示背景。

Answer 1

媒体查询的正确格式如下：

@media all and (max-width:1024px) {
    #selector {
        background-image: ...;
        background-position: ...;
    }
}

Answer 2

@media (max-width: 1024px) { 

#elementID { 
  background-image: url("Gutter.png");
  background-position: left, center; }

}

Answer 3

由于您的“边框”不是真正的边框，而是背景图片，因此您需要在媒体查询中重新定义背景（因为您无法仅删除其中一个背景图像）。

http://cssdeck.com/labs/kfoaijgc

.foo {
    background: url(http://placekitten.com/300/400) center center no-repeat;
}

@media (min-width: 1025px) {
  .foo {
      background:
          url(http://placekitten.com/300/400) center center no-repeat,
          url(http://placekitten.com/100/100) repeat-y, /* left "border" */
          url(http://placekitten.com/100/100) top right repeat-y; /* right "border" */
  }
}

如果您使用的是真正的边框，那么解决方案会更简单：

.foo {
    /* no border here */
    background: url(http://placekitten.com/300/400) center center no-repeat;
}

@media (min-width: 1025px) {
  .foo {
      border: 1px solid;
  }
}

当大小超过1024像素时，如何更改背景（边框添加）

3 个答案: