添加.hidden電話在現有的css文件隱藏背景圖像

我敢肯定有一個簡單的答案，這一個...添加.hidden電話在現有的css文件隱藏背景圖像

使用Twitter的引導，我有這個在我的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; 
    }

這是偉大的，除了一個電話在後臺標誌是一個痛苦的屁股上。我想把這個標誌放在手機上。

我看到引導，responsive.css已經定義了.hidden電話：

@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使背景圖像標籤具有。隱藏手機類？

我已經嘗試了在style.css.erb中添加.hidden-phone的一些排列，但似乎沒有任何工作 - 我必須讓語法錯誤。

謝謝！ Dave

來源

2013-03-14 Dave Collins

聽起來就像在這裏混淆了CSS和HTML。當你說：

[H]我要修改style.css.erb，以便background-image標籤具有.hidden-phone類嗎？

...您不能將類添加到CSS聲明。你實際上並不想隱藏你的元素（在這種情況下爲body），而是在你想修改background屬性的小屏幕尺寸上。所以，你已經有了媒體查詢中，補充一點：

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

然後，默認會顯示您的background-image，你是爲小屏幕移除。如果圖像很大，您可能會考慮採用移動優先方法。即做相反的事情，就像@ po228提到的那樣 - 只爲更大的視口寬度添加background-image。

來源

2013-03-14 15:57:52 CherryFlavourPez

嗯，我試過這個* ALSO *，它沒有影響。網站的其他部分似乎相當敏感，並可以在手機上正確調整。我已經與這個問題的主題作者聯繫，我會在這裏發佈更新。 – 2013-03-14 16:25:53

我站好了！當我在.login_page的現有定義之後將此添加到我的style.css.erb中時，此技術完美地工作。謝謝！！ – 2013-03-15 12:22:12

看起來你非常接近。要定義不會在手機上顯示的樣式，您需要使用最小寬度，而不是最大寬度。請嘗試以下操作：

@media only screen and (min-width: 768px) { 
    .login_page body { 
     background-image: url(<%= image_path 'oap_dotlogo.png' %>); 
     background-repeat: no-repeat; 
     background-position: 5%, 80%; 
    } 
}

來源

2013-03-14 15:49:37 po228

感謝po228和@ Ed-M！部分問題是我正在使用購買的主題（來自themeforest的gebo管理員），我正在努力保持「主題精神」中的變化。他們已經定義了style.css中的所有.login css（我將其更改爲.erb），所以我只希望將更改放入該文件中。該文件的整個最大寬度塊是在bootstrap-responsive.css中給了我一個我認爲是「應該如何」的:-)。我會嘗試其中一些建議並作出迴應。 – 2013-03-14 16:11:36

嗯，我試過了，沒有任何影響。網站的其他部分似乎相當敏感，並可以在手機上正確調整。我已經與這個問題的主題作者聯繫，我會在這裏發佈更新。 – 2013-03-14 16:25:20

添加.hidden電話在現有的css文件隱藏背景圖像

回答

相關問題