1
A
回答
4
有几个方法可以做到这一点。最好的方法使用伪元素。您需要将一种颜色应用于<body>，将第二种颜色应用于创建的元素:after。
HTML：
<body>
<main>
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
Page continues...
CSS：
body {
background-color:rgb(155,155,155);
}
body:after {
top:0;
left:0;
width:40%;
height:100%;
position:absolute;
z-index:-1;
background-color:rgb(239,0,0);
content:"";
}
main {
width:80%;
margin:0 auto;
background-color:white;
min-height:400px;
padding:20px;
}
这个答案产生干净的代码。缺点：有限的IE8支持，不支持IE7。如果您需要使用这两个浏览器，然后看看下一个选项：
给这个<body>一侧相同的背景颜色，然后而是采用：后创建一个伪元素，我们只需要创建一个真正的元素。
HTML：
<body>
<div id="bgleft"></div>
<main>
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
Page continues...
CSS：
body {
background-color:rgb(155,155,155);
}
#bgleft {
top:0;
left:0;
width:40%;
height:100%;
position:absolute;
z-index:-1;
background-color:rgb(239,0,0);
}
main {
width:80%;
margin:0 auto;
background-color:white;
min-height:400px;
padding:20px;
}
的产生完全相同的第一方法。优点是浏览器兼容性更高，缺点是代码更多一点。
最后，您可以使用附加到身体的渐变。这将使两种颜色的单一主体元素上，节省了额外的HTML，但它会通过一个讨厌的一套CSS的支持所有浏览器：
body {
background: rgb(239,0,0); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iI2VmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzliOWI5YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5YjliOWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgb(239,0,0) 0%, rgb(239,0,0) 44%, rgb(155,155,155) 44%, rgb(155,155,155) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(239,0,0)), color-stop(44%,rgb(239,0,0)), color-stop(44%,rgb(155,155,155)), color-stop(100%,rgb(155,155,155))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* IE10+ */
background: linear-gradient(to right, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef0000', endColorstr='#9b9b9b',GradientType=1); /* IE6-8 */
}
缺点：复杂的CSS这是很难稍后轻松编辑。
2
您将很难仅使用引导程序来执行此操作。 使用线性渐变后，您可以达到您的效果：http://codepen.io/ollieRogers/pen/snjkw对于不支持渐变bgs的浏览器，这需要一个后备。
body{
background: #49191a; /* Old browsers */
background: -moz-linear-gradient(left, #49191a 0%, #49191a 30%, #53cbf1 30%, #53cbf1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#49191a), color-stop(30%,#49191a), color-stop(30%,#53cbf1), color-stop(100%,#53cbf1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* IE10+ */
background: linear-gradient(to right, #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#49191a', endColorstr='#53cbf1',GradientType=1); /* IE6-9 */
}
2
你的问题与特定的bootstrap无关，如Ollie所述。
您的一些选项是使用渐变或条子（1px宽度/高度图像，您在哪个轴上重复该图像）。
我发现使用梯度发生器对于我需要启动的大多数新项目都能很好地工作。我附上了一个例子供您试用。
例
标记
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 style="color: white">Something</h2>
</div>
</div>
<div class="row ">
<div class="jumbotron">
<h2>YOLO</h2>
<div class="row">
<div class="col-md-4">Something</div>
<div class="col-md-3">Something</div>
<div class="col-md-3">Something</div>
<div class="col-md-2">Something</div>
</div>
</div>
</div>
</div>
</body>
CSS
body {
background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(left, rgb(169,3,41) 0%, rgb(143,2,34) 26%, rgb(143,2,34) 26%, rgb(0,0,0) 26%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(169,3,41)), color-stop(26%,rgb(143,2,34)), color-stop(26%,rgb(143,2,34)), color-stop(26%,rgb(0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* IE10+ */
background: linear-gradient(to right, rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#000000',GradientType=1); /* IE6-9 */
}
相关问题
- 1. 两种颜色背景
- 2. CSS：2种颜色的背景，水平分割，具有图案？
- 3. 两种颜色的水平线
- 4. 两种颜色的Android布局背景
- 5. HTML背景的两种颜色
- 6. 两种颜色的带状背景？
- 7. 多种背景颜色Fabricjs
- 8. 背景颜色50％一种颜色和50％另一种颜色
- 9. 打印背景颜色的墨水
- 10. 翻转水平动画时的背景颜色
- 11. 如何更改头部（水平/垂直）QT背景颜色QTableWidget？
- 12. 仅使用CSS水平制作背景颜色重复使用
- 13. 背景颜色不填充水平滚动下拉项目
- 14. C＃GridView垂直和水平替代背景颜色
- 15. 对背景的自来水改变背景颜色来选择颜色
- 16. 获取的水平线背景色HTML
- 17. 显示背景色水平线
- 18. 背景或背景颜色？
- 19. 背景颜色
- 20. 背景颜色
- 21. 背景颜色
- 22. 背景颜色
- 23. 颜色背景
- 24. 水平平铺背景
- 25. 只有css的多种背景颜色
- 26. Jquery滑块与多种背景颜色
- 27. QPalette具有多种颜色背景
- 28. CSS背景三角3种颜色
- 29. 多种背景颜色相互重叠
- 30. Bootstrap3网格 - 2种背景颜色
只是好奇为什么这将是必需的。 –
@Paulie_D糟糕的设计师我猜？好的，问题是，红色区域将有1个盒子，而较暗，2个盒子。或“col-md-3”为例。所以我不用这个渐变效果会很好： –
'内容'中的div可以有自己的bg颜色（红色/黑色）。身体可以有一个50％的渐变，但因为它会一直 –