Question

我正在尝试复制像this这样的标题，但我不确定我会怎么做。我开始制作一个图像填满整个屏幕，但我不能让它看起来像我提供的例子一样好。

我已经看到了这种精确的标题multiple times。我想知道是否有某种类型的库更容易制作这样的标题？

我现在拥有的代码（HTML和css，我实际上并没有把它放在实际文件中）：

<div class="cover">
<div class="filler">Text inside header</div>
</div>

.cover{
  background: url("../img/day1cover.jpg"); 
  background-size: cover;
  background-repeat:no-repeat;
  box-shadow: inset 0px -120px 100px -10px rgba(0,0,0,0.7);
  position: relative;
  color: rgb(255,255,255);  
}

.filler{
  width:100%;
  height: 100%;
  text-align: center;
  margin: 0;
}

Answer 1

这个简单的小提琴应该让你走上正确的道路：

<强> FIDDLE

说明：

要使“标题”使用整个页面，您需要将其设置为浏览器窗口的100％宽度和高度。为此，您可以使用：

 html, body, .cover {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

然后，为了使图像能够使用整个空间而不会裁剪或丢失宽高比，您可以像这样起诉background CSS属性：

.cover { 
  background: url(your_image.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

修改

FIDDLE 在标题底部的标题和标题文字上叠加。

完整代码
HTML：

<div class="cover"> <div class="filler">Text inside header</div> <div class="overlay"></div> </div> <div id="content"> ... SITE CONTENT ... </div>

CSS：

html, body, .cover, #content, .overlay { width:100%; height:100%; margin:0; padding:0; } .cover { background: url("http://lorempixel.com/output/abstract-q-g-1152-839-1.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; box-shadow: inset 0px -120px 100px -10px rgba(0, 0, 0, 0.7); position: relative; color: rgb(255, 255, 255); } .filler { position:absolute; bottom:20px; left:0; width:100%; text-align: center; margin: 0; z-index:2; } .overlay { position:absolute; top:0; bottom:0; left:0; right:0; background: rgba(0, 0, 0, 0.5); z-index:1; } #content { padding:100px; background: url("http://lorempixel.com/output/city-q-g-1152-839-4.jpg"); background-size: cover; background-repeat:no-repeat; }

Answer 2

您提供的网站具有响应能力。您可以使用http://getbootstrap.com/框架来实现您的目标

此外，如果您在互联网上找到的网站能够激发灵感，您可以通过使用firebug（firefox）检查它们并查看它们是如何构建的，或者在chrome / IE中按F12，您将看到内置的开发工具它让你调试脚本，检查html等等。 Check out firebug

Answer 3

这些页面使用的效果称为Parallax。检查this。有很多不同的，我相信你会找到一个适合你的。

以下是jQuery的列表：https://plugins.jquery.com/tag/parallax/

Answer 4

如果我理解正确，您需要在任何屏幕尺寸上全屏显示标题，并在底部和箭头显示文字。

这是JSFiddle。

您可以使用Javascript / jQuery获取用户屏幕的高度，并将其应用到标题的高度。

这样的事情：

/* Get browser height */
var browserHeight = $(window).height();

$("header").css("height", browserHeight);

Answer 5

<div class="cover">
<div class="filler">Text inside header</div>
</div>

CSS

.cover{
  background: url("../img/day1cover.jpg"); 
  background-attachment: fixed;
  top: 0px;
  left: 0px;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  //your css

  box-shadow: inset 0px -120px 100px -10px rgba(0,0,0,0.7);
  //position: relative; none
  color: rgb(255,255,255);  
}

.filler{
  width:100%;
  text-align: center;
  margin: 0 auto;
}

Answer 6

尝试使用此解决方案： http://css-tricks.com/perfect-full-page-background-image/

.selector { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

适用于：

Safari 3+
Chrome Whatever +
IE 9 +
Opera 10+（Opera 9.5支持背景大小但不支持关键字）
Firefox 3.6+（Firefox 4支持非供应商前缀版本）

IE的

和olso

.selector {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}

奥斯陆：

jQuery上有一个 One Page Scroll 插件，它可能对你的情况有用。网址：http://www.thepetedesign.com/demos/onepage_scroll_demo.html

如何制作整页标题？

6 个答案: