Question

请查看我的示例代码

HTML

   <div class="custom-container">
        <section class="parallax-bg-1 text-center" style="background-image:url('https://killtheboredomdotcom.files.wordpress.com/2015/08/skyline-of-rome.jpg?w=1920&h=768&crop=1')">
            <h1 class="">Welcome</h1>

            <p class="lead">subtitle</p>
        </section>
    </div>

CSS

.custom-container{
  padding-right: 0;
  padding-left: 0;
  width: 100%,
}
section {
    height:350px;
    padding-top:50px;
    padding-bottom:50px;
}
.parallax-bg-1 {
    background: no-repeat top center fixed;
    color:#fff;
    background-size:cover;
}

容器

}
.custom-container{
  padding-right: 0;
  padding-left: 0;
  width: 100%,
}
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 1600px) {
    .container {
        max-width: 1600px;
    }
}
@media (min-width: 1900px) {
    .container {
        max-width: 1900px;
    }
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1180px;
  }
}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

JS小提琴：https://jsfiddle.net/unpvuzaq/（它在JS Fiddle中运行得很好，但最终不是这样）

图片处于视差模式但看看我的网页截图仍然有填充

图像分辨率1920x1080

请帮助我。

Answer 1

添加css外部div容器

.container.body-content { 
        width: 100%; 
        padding: 0; 
        margin: 0;}

Answer 2

我认为图片可能小于您的屏幕尺寸......您应该将图片作为拉伸...

为分部类添加样式：

background-size: cover;

Answer 3

.custom-container{
  padding-right: 0;
  padding-left: 0;
  width: 100%;
}
section {
    height:350px;
    padding-top:50px;
    padding-bottom:50px;
}
.parallax-bg-1 {
    background: no-repeat top center fixed;
    color:#fff;
    background-size:100%;
}

background-size：100％;正致力于4K分辨率显示。（测试）

自定义容器不是完整宽度

3 个答案: