背景放置不正確，文本無法導入，翻轉效果？

Question

大家好，我仍在為一個朋友設計相同的Web樣機，我正在設法弄清楚一些事情，以便我對未來有所了解。

首先，背景圖像的位置不正確（我知道是否可以將其從固定位置更改，但是我想要那種滾動效果）。 代碼是：

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

如果我弄亂了背景尺寸，則尺寸與網站不符。

1. 我從計算機（尚未設置服務器）將字體作為OTF文件上傳到公共字體生成器網站，昨晚在計算機上運行該字體時，但現在從我的計算機上運行它辦公計算機，默認情況下會顯示該字體。 有解決方法嗎？ 還是我需要一台服務器？

2. 我想在底部的圖片上添加一些過渡效果，將它們總體上放大一點，淡出並添加文本，類似於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); } 

另外，由於我使用的是Bootstrap框架，因此當我嘗試通過調用類縮略圖來放大縮略圖時，沒有什么改變如何使圖像變大但仍保持在原來的位置？

1. 最后一個問題是關於如何使網站的格式適應瀏覽器窗口，移動設備等的一般性問題，以使字體不在頁面上運行或頂部徽標放錯位置？ 這可能與我一直在通過代碼學院學習的javascript有關（但到目前為止，它是所有這些游戲和隨機函數，而不是網站功能）。 如果使窗口變小，則導航菜單文本會在.jumbotron div上運行。

謝謝大家，我知道很多，但是希望有人可以幫助我解決其中之一！

**這是JSFiddle ** http://jsfiddle.net/thedonmon/KZ7d8/5/

Answer 1

是的，如果要從其他計算機訪問它們，則OTF文件需要位於服務器上。 您應該將它們加載到服務器上，以便每個人都可以看到它們，而不僅僅是在本地計算機上。 除非它們來自Google-fonts，否則您可以使用其API。.https ://www.google.com/fonts

至於for images部分，我為您創建了一個小提琴： http : //jsfiddle.net/sburke0708/KZ7d8/18/我認為您正在尋找的是-webkit-transform:屬性。 確保添加其他前綴以包含其他瀏覽器。

您要檢查媒體查詢的最后一部分。 這些可以根據您的需求調整內容大小。 查看https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries媒體查詢通常在CSS末尾進行，以調整特定元素的大小，以避免此問題。