1

我认为通过添加我在这里尝试做的图像将是最好的。

我需要的是有一条线（对用户来说只是一个视觉上的东西）来分隔标题 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>
4

2 回答 2

0

用于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}

演示

于 2013-01-18T11:50:01.627 回答
0

任何一个：

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

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

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

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

于 2013-01-18T11:41:12.567 回答