背景沒有正確定位，文本沒有導入，翻轉效果？

嘿，我還在爲一個朋友在同一個網頁樣機設計上工作，我正在努力弄清楚一些事情，所以我知道未來。背景沒有正確定位，文本沒有導入，翻轉效果？

首先，背景圖像沒有正確定位（我知道如果我從固定的位置改變它，但我想要滾動效果）。代碼是：

.jumbotron { 
background:url("http://i.imgur.com/5zm8SAo.jpg") no-repeat center center fixed; 
background-size: cover; 
height: 500px; 
}

如果我亂搞背景大小，那麼尺寸不適合網站。

我上傳的字體從我的電腦（我沒有架設服務器還）到公共字體生成器的網站爲OTF文件，我有它在我的電腦上運行時我正在它昨天晚上，但現在從我的辦公室電腦，字體默認顯示。有沒有解決方法？還是我需要一臺服務器？

我想爲底部的圖片添加一些翻轉效果，放大一般他們一點，淡出和添加文字，類似於reigningchamp網站（滾動到底部，沒有足夠的代表發佈兩個鏈接？！？），所以此代碼的工作：

<div class="col-md-4"> 
     <div class = "grow"> 
      <div class="thumbnail"> 
       <img src="#" /> 
       </div> 
      </div> 
     </div> 
.grow { 
display: inline-block; 
-webkit-transition-duration: 0.3s; 
transition-duration: 0.3s; 
-webkit-transition-property: transform; 
transition-property: transform; 
-webkit-transform: translateZ(0); 
transform: translateZ(0); 
box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
} 
.grow:hover, .grow:focus, .grow:active { 
-webkit-transform: scale(1.1); 
transform: scale(1.1); 
}

此外，由於我使用的是引導框架，當我嘗試從調用類的縮略圖放大的縮略圖，沒有什麼變化如何讓我的圖片大，但仍然在他們的位置？

一個最後的東西是如何使網站的格式調整到瀏覽器窗口，手機等一般問題，所以字體不會在頁面上運行或頂部的標誌錯位？這可能與我一直致力於通過codeacademy學習的JavaScript（但迄今爲止它的所有這些遊戲和隨機功能，而不是網站功能）有關。如果使窗口變小，則導航菜單文本將運行到.jumbotron div上。

感謝球員們，我知道很多，但希望有人能幫助我與其中的一個！

**這裏是**的jsfiddlehttp://jsfiddle.net/thedonmon/KZ7d8/5/

來源

2014-06-24 DonJunior

老實說，我傾向於討厭使用背景。對於一個絕對定位的具有負Z指數的div，我一直非常高興，這樣我就可以做任何我想做的事情。 – VikingBlooded

因此，這似乎在結果窗口中工作，但是當我查看全屏結果時，它顯示原始佈局...當我註釋掉我最初的背景代碼時，有一個灰色框？ 'code'.jumbotron { background：url（「http://i.imgur.com/5zm8SAo.jpg」）no-repeat center center fixed; background-size：cover; height：500px; } .jumbotron.container z-index：-1; position：absolute; }'code' – DonJunior

你有媒體特定的CSS？ – VikingBlooded

是在OTF文件需要在服務器上，如果你打算從不同的機器上訪問它們。您應該將它們加載到服務器上，以便每個人都可以看到它們，而不僅僅是在本地計算機上。除非他們是從谷歌的字體拍攝，您可以使用自己的API .. https://www.google.com/fonts

至於對圖像的一部分，我創建了一個搗鼓你：http://jsfiddle.net/sburke0708/KZ7d8/18/我想你在找什麼是-webkit-transform:性能。確保您添加其他前綴以包含其他瀏覽器。

您想要查看媒體查詢的最後一部分。這些重新調整您的內容以滿足您的需求。檢出https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries媒體查詢通常會在CSS的末尾調整特定元素的大小以避免此問題。

來源

2014-06-24 17:31:44 Sburke0708

太棒了，謝謝。我知道在網上獲取字體並不那麼簡單。我想現在，默認或Arial會做，直到我得到服務器了（任何指導呢？）。也感謝JSFiddle，所以我可以包含文本覆蓋，你將鼠標懸停在這個屬性上（我認爲淡入淡出就是不透明）？ – DonJunior

要清楚，.otf文件是來自本地機器的文件。查看http://css-tricks.com/snippets/css/using-font-face/查看它們之間的區別。使用你的項目創建一個字體目錄，並將URL指向/ fonts ex：url（'./fonts/webfont.woff'）格式（'woff'） – Sburke0708

明白了。要儘快獲得服務器哈哈 – DonJunior

背景沒有正確定位，文本沒有導入，翻轉效果？

回答

相關問題