Question

我需要像这样的“背景文字”＆gt; （EXAMPLE）

向下滚动页面时，文字不会显示。

我的.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在背景图像上书写？

2 个答案: