平铺两个背景，无法在第一个平铺图像上方显示文字

我的主要内容区域与标题（沙质棕色）重叠，我试图在白色内容区域附近实现阴影。平铺两个背景，无法在第一个平铺图像上方显示文字

我有四个图像组成了该内容区域：顶部，底部，与99px的沙质棕色背景平铺的部分（注意img中的空白区域）以及用白色背景以匹配页面其余部分的背景。

我遇到的问题是当我平铺背景图像，其中包含沙褐色的颜色和包含白色的背景图像。正如您在附件中看到的，我希望文字向上移动。

我有我的HTML设置方式：

<div id="main-content"> 

<div id="content-header"></div> 
<div id="content-header-tile"></div> 
<div id="content"> 

    <div id="content-body"> 
    <p>Text here</p> 
    </div> 

</div> 
</div>

我沿着我能削减多少我div的使用

CSS的方式想象那些div的

#main-content { 
margin-top:-120px; 
margin-right:auto; 
margin-left:auto; 
height:500px; 
width:960px; 
background: url('..img/content_bg.png') repeat-y top left; 
} 

/* top of box, with drop shadow img */ 
#content-header { 
height:11px; 
background: #fff url('../img/content_header_bg.png') top left; 
width:960px; 
} 

/* tiles bg img with same sandy brown color as the header above, for 99px */ 
#content-header-tile { 
background: #fff url('../img/content_header_tile_bg.png') repeat-y top left; 
width:960px; 
height:99px; 
} 

/* begins tiling after 99px (after the div above is done tiling) */ 
#content { 
background: #fff url('../img/content_white_tile_bg.png') repeat-y top left; 
width:960px; 
} 

/* like #content-header, but this displays the bottom piece of the box */ 
#content-footer { 
height:12px; 
width:960px; 
background: #fff url('../img/content_footer_bg.png') no-repeat top left; 
}

enter image description here

来源

2012-02-23 Brad

这条规则：

#main-content {margin-top:-120px;}

是什么移动你的白盒ontop的打火机但是并没有让你知道你在＃main-content（＃content-header和＃content-header-title）内有两个div，加起来高度为120px。

我相信，这将让你更接近：

#content-body {margin-top:-120px;}

你有没有考虑，虽然，只是使用CSS盒子阴影？ http://css-tricks.com/snippets/css/css-box-shadow/

来源

2012-02-23 21:53:35

我尝试使用过滤器的盒子阴影，但我不能让它在IE7中工作http://jsfiddle.net/vn3Hg/4/ – Brad 2012-02-24 13:27:10

一切都是一个折衷。为了确保IE7获得这种微小的美学改进，你会让你的标记变得非常复杂，并且会耗费很多周期来计算它。所有这些对于一个浏览器来说，其市场份额约为5％（并且下降）。 – 2012-02-24 13:34:10

我想我会使用框阴影样式，我得到这个工作在IE7 http://stackoverflow.com/a/7841114/26130 – Brad 2012-02-24 14:38:28

另一种选择也许是削减主要<div>节剩下3：

头（棕......但是，顶边的一角）
中间（白......这瓷砖的唯一部分）
页脚（白色。 ..只有底部边缘的顶端）

这样，您的文本将接近该虚构的白色盒子的顶部......而不是被该额外的（棕色）瓷砖片推下来。

此外，还有大约从几年像这样的文章后面，如果我没有记错：http://www.alistapart.com/articles/fauxcolumns/

来源

2012-02-23 21:48:23 summea

平铺两个背景，无法在第一个平铺图像上方显示文字

回答

相关问题