Question

我有一个带井的引导页面。这些井应该有一个图像作为背景。但是每个井的图像都不应该重新开始。它应该在整个页面之下。因此，在第一口井下，您会看到图像的第一部分，在第二口井下，您应该会看到图像的另一部分略低。

我尝试将所有东西放在具有该背景的div中，并使井背景透明，但这不起作用。你会怎么做？

这就应该是这样，只有这里每个井的图像重新开始。

＆＃13;

.well {
    background: url("https://s-media-cache-ak0.pinimg.com/736x/49/6b/65/496b65edfa8065b1e938dcf25287d9d0.jpg");
}

＆＃13;

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <div class="container">
      
    <h1>page</h1>
    <div class="well">hello</div>
    <div class="well">bye</div>
  </div>
</body>
</html>

＆＃13;

它适用于每一口井。因此，当您添加第三个时，您应该再次获得更多的完整图像。当有更多的井时，图像很大，可以重复。

Answer 1

这是另一个解决方案。背景图片必须为cover和fixed：

＆＃13;

body {padding:20px}

.container { 
background: gray;
}
.well {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
 background-image: url("http://lorempixel.com/output/nature-q-c-640-480-4.jpg");
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <h1>page</h1>
    <div class="well">hello</div>
    <div class="well">bye</div>
    <div class="well">hello</div>
    <div class="well">bye</div>
</div>

＆＃13;

只能用css查看bootstrap井中的背景

1 个答案: