Question

如果浏览器高度大于1080像素，我正在试图找出如何删除图像。例如，当页面加载并且我的图像被加载时，Android设备将具有超过1080，并且它下降到页面的大约2/3，其余部分是空白的。我宁愿它完全消失。我怎么能摆脱它。以下是我设置它的方法：

body {
  font-family: Helvetica;
  font-size: 1.8rem;
  background-color: #000;
  margin: 0 auto;
  background-image: url("../images/myimage.jpg");
  background-repeat:no-repeat;
  background-position:center top;
  background-position:no-repeat;
  background-attachment:fixed;
}

我尝试了什么

@media screen and (min-height: 1080px) {
    body {
        background-image: none;
    }
}
@media device and (orientation: portrait) and (min-height: 1080px) {
    body {
        background-image: none;
    }
}

Answer 1

尝试媒体查询！

/* standard*/
@media screen and (min-height: 1080px) {
    body {
        background-image: none;
    }
}
/* orientation */
@media device and (orientation: portrait) and (min-height: 1080px) {
    body {
        background-image: none;
    }
}

Answer 2

您需要在此处使用媒体查询，但您希望关注最大高度（而不是宽度......这是媒体查询通常关注的内容，例如http://unmatchedstyle.com/news/height-based-media-queries.php）

@media screen and ( min-height: 1080px ){
         body { background-image: none; }
    }

您应该花一些时间来了解移动响应式设计，特别是因为媒体查询可以像您这样的问题派上用场。这是一个开始阅读它们的好地方：http://alistapart.com/article/responsive-web-design/

另请注意，某些JS插件（例如Backstretch）会将图像拉伸到背景大小的任何位置......如果您感兴趣，可能是另一件需要考虑的事情。

Answer 3

为包含背景图像的元素指定一个id属性，然后使用该id属性使用带有JavaScript的if语句将样式指定给背景。

            <script>

            var element = document.getElementById("elementHoldingTheBackground");

            if (1080 < window.innerHeight ) { // returns a number
                element.style.display="none"; // hides the element with CSS
            }

            </script>

这是最简单的方法，但我确信有更好的方法可以做到这一点！

我也不是专家。请不要为此做饭。我只有18岁。我是新手！

请告诉我你的想法。

如果浏览器高度大于1080px，请删除背景图像

3 个答案: