背景放置不正确，文本无法导入，翻转效果？

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末尾进行，以调整特定元素的大小，以避免此问题。