无法使背景图像(线)跨越屏幕宽度与水平滚动

时间:2013-09-19 19:30:12

标签: css background

我需要创建一条横跨整个屏幕的红线。

http://jsfiddle.net/k86gc/

<!DOCTYPE html>
<head>
<style type="text/css">
#redBar{ width: 100%; height: 10px; z-index: -1; margin-top: 80px; background: #D2232A;}
#heading{ width: 768px; margin-left: auto; margin-right: auto; margin-top: 80px;}
</style>
</head>
<body>
<div id="redBar"></div>
<div id="heading"> Heading</div>
</body>
</html>

请注意,当您使用水平滚动条向右滚动时,红色条不会显示。

1 个答案:

答案 0 :(得分:1)

有不同的方法可以做到这一点。使用您的方法,您只需将position: fixed添加到#redBar即可。见this updated jsFiddle