css - 在现有的 css 文件中添加 .hidden-phone 以隐藏背景图像

Question

我相信这个问题有一个简单的答案...

使用 Twitter Bootstrap，我在我的 style.css.erb 文件中有这个:

.login_page body {height:100%;
        max-width:inherit;
        margin:0 20px;
        background-image: url(<%= image_path 'oap_dotlogo.png' %>);
        background-repeat: no-repeat;
            background-position: 5%, 80%;
        background-color: #E3F5FD;
    }

这太棒了，除了在手机上，背景 Logo 让人头疼。我想把那个标志放在手机上。

我看到 bootstrap-responsive.css 已经定义了 .hidden-phone:

@media (max-width: 767px) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}

那么，我该如何修改 style.css.erb 以便 background-image 标签具有 .hidden-phone 类？

我已经尝试了一些在 style.css.erb 中添加 .hidden-phone 的排列组合，但似乎没有任何效果 - 我一定是语法错误。

谢谢! 戴夫

Answer 1

听起来您在这里混淆了 CSS 和 HTML。当你说:

[H]ow do I modify the style.css.erb so that the background-image tag has the .hidden-phone class?

...您不能将类添加到 CSS 声明中。您实际上并不想隐藏您的元素(在这种情况下是body)，而是在小屏幕尺寸下您想要修改背景属性(property)。因此，在您已有的媒体查询中，添加以下内容:

@media (max-width: 767px) {
  .login_page body { background-image: none; }
  ...
  all your other small-screen styles
}

然后，默认将显示您的 background-image 并且您正在为小屏幕删除它。如果图像很大，您可能会考虑移动设备优先的方法。即做相反的事情，正如 @po228 提到的那样——只为更大的视口(viewport)宽度添加 background-image。