全宽边框线和透明标志越过答案

【问题标题】：full width border line and transparent logo goes over全宽边框线和透明标志越过
【发布时间】：2013-01-18 19:54:21
【问题描述】：

我认为最好在此处添加我正在尝试做的事情的图像。

我需要的是有一条线（对用户来说只是视觉上的东西）来分隔标题 div 和内容 div，但同时徽标应该就在这条线上。

当我将border-bottom: 5px solid #ff0000; 添加到header_wrap 时，显然这条线在透明徽标中变得可见，因此看起来徽标被划线了！这是我唯一遇到的问题。

有什么方法可以满足我的需要吗？

标志的背景必须是透明的，因为标题和页面正文将有图像作为背景。

提前致谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <style>
        *
        {
            margin:0px;
            padding:0px;
        }

        /*** HEADER *************************************************************/

        #header_wrap
        {
            float: left;
            width: 100%;
            height: 115px;
            position:fixed;
            top:0;
            z-index:1;
            border-bottom: 8px solid #e61923;
        }
        #header_centered_content
        {
            width: 850px;
            height: 115px;
            margin: 0 auto 0;
            position: relative;
        }
        #logo
        {
            width: 229px;
            height: 49px;
            position: absolute;
            left: 0px;
            top: 76px;
            background-image:url(images/logo-top.png);
        }

        /*** BODY *************************************************************/

        #body_wrap
        {
            float:left;
            width:100%;
            height:355px;
            margin-top:150px;
        }

        #body_centered_content
        {
            width: 850px;
            margin: 0 auto 0;
            position: relative;
        }   
    </style>
</head>

<body>

    <div id="header_wrap">
        <div id="header_centered_content">
            <div id="logo"></div>
        </div>
    </div>

    <div id="body_wrap">
        <div id="body_centered_content">
            A lot of TEXT !!!
        </div>
    </div>


</body>
</html>

【问题讨论】：

发布您的 CSS 和徽标图片链接

标签： html css layout

【解决方案1】：

要么：

1：重新创建白色背景的徽标

2：将logo放入一个白色背景的容器中，例如另一个div

3：如果你有logo作为div的背景图片，也将背景颜色设置为白色。

以上所有使用：“背景颜色：白色；”或背景颜色：#ffffff;"

【讨论】：

【解决方案2】：

使用position:absolute 将divs 放在另一个上。

并为包含徽标图像的 div 添加背景颜色为白色。

HTML

<div id="header_wrap">
        <div id="header_centered_content">
          &nbsp;
        </div>
   <div class="logo"><img src="http://redframe.com/mediakit/horz/black_bg/Redframe_Logo_Black_100.png" /></div>
    </div>

    <div id="body_wrap">
        <div id="body_centered_content">
            A lot of TEXT !!!
        </div>
    </div>

CSS

#header_wrap{width:100%; position:relative; height:150px; border:green solid 1px}
#header_centered_content{position:absolute; top:41%; border-bottom:5px solid #ff0000; height:5px; width:100%}
.logo{position:absolute; top:38%; left:40%; background:#fff}

DEMO

【讨论】：

徽标必须是透明的。标题和主体都有自己的图像作为背景。
现在唯一的解决方案是只在中间更改图像背景颜色