Question

嘿伙计们，我仍在为朋友制作相同的网站样机设计，我正在努力找出一些事情，所以我知道未来。

首先，背景图像定位不正确（我知道如果我将它从固定更改它将会，但我想要滚动效果）。代码是：

.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。

谢谢你们，我知道很多，但希望有人可以帮助我解决其中一个问题！

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

Answer 1

是的，如果要从不同的计算机访问OTF文件，则需要在服务器上。您应该将它们加载到服务器上，以便每个人都可以看到它们，而不仅仅是在本地计算机上。除非它们来自Google字体，否则您可以使用其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结尾处调整特定元素的大小以避免此问题。

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

1 个答案: