Фон расположен неправильно, текст не импортируется, эффекты ролловера?

Question

Привет, ребята, я все еще работаю над тем же дизайном макета для друга и пытаюсь выяснить несколько вещей, которые я знаю на будущее.

Во-первых, фоновое изображение не расположено должным образом (и я знаю, если я изменю его с фиксированного, оно будет, но я хочу этот эффект прокрутки). Код является:

.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);
    }
   

Кроме того, так как я использую платформу начальной загрузки, когда я пытаюсь увеличить миниатюры от вызова миниатюры класса, ничего не меняется, как я могу увеличить изображения, но все еще в той строке, в которой они находятся?

1. И One LAST Thing - это общий вопрос о том, как настроить форматирование сайта в соответствии с окном браузера, мобильным телефоном и т. Д., Чтобы шрифт не запускался на странице или логотип в верхней части не помещался? Это может быть связано с javascript, который я изучал с помощью codeacademy(но пока это все эти игры и случайные функции, а не функциональность сайта). Если вы уменьшите размер окна, текст меню навигации перейдет к элементу.jumbotron.

Спасибо, ребята, я знаю это очень много, но, надеюсь, кто-то может помочь мне с одним из них!

** Вот JSFiddle ** http://jsfiddle.net/thedonmon/KZ7d8/5/

Answer 1

Да, файлы OTF должны быть на сервере, если вы собираетесь обращаться к ним с разных компьютеров. Вы должны загрузить их на сервер, чтобы их могли видеть все, а не только на вашем локальном компьютере. Если они не взяты из Google-шрифтов, вы можете использовать их 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, чтобы изменить размеры определенных элементов, чтобы избежать этой проблемы.