0

假设我有一个 980px 居中的内容区域，但有一个背景元素从屏幕左侧一直扩展到内容区域的 80%。在没有 JavaScript 干预或在 body 上使用背景图像的情况下，你如何做到这一点？

编辑：

这是一个视觉概念的指导：http: //i.imgur.com/36tCm.jpg。黄色标题扩展到窗口左侧，位于内容框区域之外。

4

3 回答 3

1

你用 css 处理这个问题

#inner{
   background:#fff;
   width:80%;
   position:absolute;
   left:0;
   top:0;
}

你应该为它的父母设置这种风格

#parent{
   position:relative;
}

例如 ：

<div id="parent">
<div id="inner"></div>
</div>
于 2012-10-09T12:50:00.553 回答
1

#pageheader您可以通过一些视觉技巧来实现这一点——即，通过使用两个黄色 div 来创建元素的视觉效果。

这是一个说明效果的 JSFiddle。

这是一些示例 HTML：

<body>
  <div id="yellowBar">
  <div id="content">
    <div id="pageHeader">
  <!--the rest of your HTML...-->

然后，你的 CSS：

#yellowBar {
  height: (set appropriate height here);
  background: yellow (set appropriate hex code here); 
  position: absolute;
  top: (set appropriate top value so the #yellowBar nudges up against the #pageHeader visually);
  width: 50%;
  left: 0px;
}

#pageHeader {
  height: (same height as #yellowBar); 
  background: (same color as yellowBar); 
  width: 80%; 
  /*any other CSS rules*/ 
}
于 2012-10-09T15:07:12.243 回答
1

您可以在 980px 容器之前使用 div 元素获得悬垂效果，并提供与标题元素所在位置相匹配的位置

jsfiddle 示例或全屏示例

在屏幕截图中，左侧有橙色悬垂，右侧有黑色悬垂，因此这是 HTML 结构（或者，您可以使用单个 div 和 css 渐变来创建悬垂，以创建高达 50% 的橙色，然后将另一个变为黑色50%)

<div class="container-outer">
    <div class="header-overhang header-left"></div>
    <div class="header-overhang header-right"></div>
    <div class="container">
        <div class="sidebar">
            sidebar area
        </div>
        <div class="header">
            PAGE HEADER
        </div>
        <div class="content">
            content text
        </div>
    </div>
</div>​

CSS：

.container-outer {background-color:#BDC7D2;border-top:60px solid #050912;}
.header-overhang {height:72px;width:50%;position:absolute;top:60px;}
.header-left {left:0;background-color:#FDC103;}
.header-right {right:0;background-color:#050912;}
.container {width:980px;margin:0 auto;position:relative;}

.sidebar {float:right;width:20%;height:220px;line-height:220px;text-align:center;border-top:5px solid #d7e0e9;border-bottom:3px solid #d7e0e9;background-color:#fff;}
.header {height:72px;line-height:72px;padding-left:40px;width:80%;background-color:#FDC103;}
.content {padding:50px 40px 120px 120px;background:#050912;color:#fff;}
于 2012-10-09T15:07:16.963 回答