如何使用 bootstrap 3.3 在背景图片上书写？

Question

我需要这样的 "background text" > (EXAMPLE)

当我向下滚动页面时，文本没有上升。

my .css 用于背景图片

html,
body {
  font-family: 'Lato', sans-serif;
  height: 100%;
  background: url(../img/image-bg-jpg.jpg) center center no-repeat fixed;
  webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

我正在使用 bootstrap 3.3

Answer 1

该示例中的文本位于固定定位的容器中：

.jumbotron .container {
    position: fixed;
    width: 100%;
    padding-top: 5%;
    top: 50%;
    transform: translateY(-50%);
}

<div class="container"></div>

您应该熟悉浏览器的文档检查器才能发现此类内容。

Answer 2

如果我是你，我会把图片和图片标签放在一起，然后固定位置，像这样： <img class="img" /> .img{ min-width: 100%; min- height: 100%; position: fixed; z-index: 0; }

然后将您的文本放在下面的 div 中，例如：

<div class="div">text goes here</div>
.div{ margin-top: 100%;}

如何使用 bootstrap 3.3 在背景图片上书写？

How do I write on top of a background image with bootstrap 3.3?

css

text

scroll

background

twitter-bootstrap