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: ロゴを白い背景のコンテナに入れます。たとえば、別の div です。

3: div の背景画像としてロゴがある場合は、背景色も白に設定します。

上記のすべての使用:「背景色: 白;」または background-color:#ffffff;"

于 2013-01-18T11:41:12.567 に答える