我目前正在构建网页并遇到以下问题，如果有人帮助我解决它，我将不胜感激:
我希望页面的每个“部分”(div) 都有一个全 Angular 背景图像。在此背景下，内容(文本)有一个较小的 div。在右侧，有一个滚动侧边栏，它会随着用户滚动。我找不到如何让全 Angular div 和侧边栏(这是一个带有后代的 div 元素)覆盖它？
当前结构如下:
<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">
<div class="col-md-9">
here go all the "sections"...
</div>
<div class="col-md-3">
and that is the sidebar...
</div>
</div>
</body>所以简而言之，我们需要的是背景图像，上面有一些 html 内容，右边有一个侧边栏(但被图像覆盖)。提前致谢!
最佳答案
所以我想这意味着您打算制作一个固定的侧边栏？您需要将列排成一行。使该行具有背景图像。固定侧边栏，这会使 Bootstrap 类无效，但您可以将宽度设置为 25%，以便保持响应。您可能需要添加一些填充/边距，但我用随机颜色快速制作了一些东西，这样您就可以理解了。
#sidebar{
position:fixed;
right:0;
top:0;
background-color:rgba(0,0,0, .5);
width:25%;
color:white;
}
.blue{
background-color:blue;
}
.white{
background-color:white;
}
.red{
background-color:red;
}<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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">
<div class="row red">
<div class="col-md-9">
Section 1
</div>
<div class="col-md-3" id="sidebar">
and that is the sidebar...<br/>
ber<br/>
baer
badsr
</div>
</div>
<div class="row white">
<div class="col-md-9">
Section 2
</div>
</div>
<div class="row blue">
<div class="col-md-9">
Section 3
</div>
</div>
</div>
</body>关于html - 背景图像扩展到整个侧边栏的部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44432482/