5

相对 CSS/bootstrap 新手。

我花了一段时间尝试使用this CSS Tricks page上的第一种方法获取背景图像以与Twitter Bootstrap集成。我最终使用“body”作为 CSS 标记，因为 HTML 只是……不起作用。虽然一切正常，但图像从顶部导航栏“后面”开始，然后向下延伸，因此顶部隐藏在黑色导航栏后面

我尝试使用 margin-top 将背景图像的顶部与导航栏的底部对齐，但这也会将容器和所有其他内容也向下移动（显然，因为我在全身上放置了边距页）。

我还尝试为背景图像（backgroundimage）创建一个独特的类，并在body标签内立即放置一个div，并在html关闭标签之前关闭div，但再次调整它会调整所有页面内容，而不是只是背景图像。

将背景图像的 div 移动到导航栏下方会将其限制在活动的“容器”空间中，因此背景图像现在仅存在于屏幕的中间三分之一处。

body { 
    background: url(../images/height-chart500w.png) repeat-y fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 15%;
}

鉴于背景图像的大小调整属性，仅更改图像本身以在顶部创建空间的 hacky 解决方案显然行不通。如何在导航栏下方对背景图像进行 CSS 处理？

4

3 回答 3

7

使用背景位置。它有两个值：一个用于 x 轴，另一个用于 y 轴。在你的情况下，它会是这样的：

background-position: 0 Y;其中 Y 是导航栏的高度。

于 2012-07-10T12:54:30.467 回答
1

派对迟到了，但由于这个答案，我的页面可以按我的意愿显示，这是我的 CSS 代码。希望对新手有帮助

header.masthead {

  position: relative;
  width: 100%;
  min-height: auto;
  text-align: center;
  color: white;
  background-image: url("../img/testimage5.jpg");
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
@media (max-width: 992px) {
  header.masthead {

    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    color: white;
    background-image: url("../img/testimage5.jpg");
    background-position: 0 20px;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
  }
}
于 2017-11-12T11:55:02.840 回答
0

我查看了 www.builtwithbootstrap.com 博客中的示例，似乎这个人正在使用这个： www.1in5photo.com

body {
position: relative;
padding-top: 20px;
background-color: black;
background-image: url(../img/grid-18px-masked.png);
background-repeat: repeat-x;
background-position: 0 40px;
}
于 2012-07-10T12:52:04.583 回答