全寬邊框線和透明標誌越過

我雖然這將是最好的通過添加我想在這裏做什麼的圖像。全寬邊框線和透明標誌越過

我需要的是有一條線（只是用戶的視覺事物）來分隔標題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>

來源

2013-01-18 BentCoder

發佈你的CSS和標識圖像鏈接 – Sowmya

或者：

1：重新創建具有一個白色背景

2的標誌：把標誌在容器中使用白色背景，例如另一個div

3：如果您將徽標作爲div的背景圖像，也將背景顏色設置爲白色。

以上全部使用：「background-color：white;」或背景顏色：#FFFFFF;」

來源

2013-01-18 11:41:12

必須是透明的 – BentCoder

使用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

來源

2013-01-18 11:50:01 Sowmya

標誌必須是透明的。標題和主體有它自己的圖像作爲背景。 – BentCoder

改變他們圖像顏色只在中間是現在唯一的解決方案 – Sowmya

全寬邊框線和透明標誌越過

回答

相關問題