Question

我想通过添加我在这里尝试做的图像来做到最好。

我需要的是有一条线（只是用户的视觉效果）来分隔标题div和内容div，但同时标识应该就在那条线上。

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

任何方式做我需要的事情？

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

提前致谢

the result I need is this

<!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>

Answer 1

或者：

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

2：将徽标放在带有白色背景的容器中，例如另一个div

3：如果您将徽标作为div的背景图像，也将背景颜色设置为白色。

以上所有用法：“background-color：white;”或背景色：#ffffff;“

Answer 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

全宽边框线和透明徽标翻过来

2 个答案: