圖像具有擴大的中間

我想要一個小的，1或2像素的線沿着我的頁面中間的一部分來分隔內容中的導航文本。我希望線條在線條的頂部和底部淡出到背景顏色（好吧，只是淡出透明），但我希望線條的中間純黑色部分隨着內容div的大小展開對。圖像具有擴大的中間

難道這是令人困惑的閱讀，我需要詳細說明嗎？

編輯：我已經做了所有與表現在，我覺得這會更容易。現在我的問題是讓行的中間部分與名爲「content」的其他表格單元一起展開。除了sep_mid單元之外，所有東西都可以工作，因爲我不想爲單元格設置固定的高度，我希望它根據「內容」單元格進行大小設置。

這裏是我的代碼：

HTML：

<body> 
    <div id="wrapper"> 
     <table align="center"> 
      <tr> 
       <td class="nav" rowspan="3"><p>test</p></td> 
       <td class="sep_top" rowspan="1"></td> 
       <td class="content" rowspan="3"><p>Content here!</p></td> 
      </tr> 
      <tr> <td class="sep_mid" rowspan="1"></td> </tr> 
      <tr> <td class="sep_bot" rowspan="1"></td> </tr> 
     </table> 
    </div> 
</body>

CSS：

body { 
    background-color: #bbc2c7; 
    background-image: url('/images/bg.png'); 
    background-repeat: repeat-x; 
} 

body p { 
    font-family: Delicious; 
} 

@font-face { 
    font-family: "Delicious"; 
    src: url('/fonts/delicious.ttf'); 
} 

@font-face { 
    font-family: "Delicious"; 
    src: url('/fonts/delicious_bold.ttf'); 
    font-weight: bold; 
} 

#wrapper { 
    margin: 0 auto; 
    width: 1000px; 
} 

#wrapper p { 
    font-weight: bold; 
    font-size: 16px; 
    font-family: Delicious; 
} 

.nav { 
    text-align: right; 
    padding-right: 20px; 
} 

.sep_top { 
    background-image: url('/images/sep_top.png'); 
    background-repeat: no-repeat; 
    float: left; 
    padding: 0px; 
    margin: 0px; 
    width: 1px; 
    height: 15px; 
} 

.sep_mid { 
    background-color: #000; 
    float: left; 
    padding: 0px; 
    margin: 0px; 
    width: 1px; 
} 

.sep_bot { 
    background-image: url('/images/sep_bot.png'); 
    background-repeat: no-repeat; 
    padding: 0px; 
    margin: 0px; 
    width: 1px; 
    height: 15px; 
} 

.content { 
    padding-left: 20px; 
} 

table { 
    border-collapse: collapse; 
} 

table td { 
    border-collapse: collapse; 
}

來源

2012-02-20 taylorthurlow

考慮使用http://jsfiddle.net給我們一個工作的例子？ – 2012-02-20 07:03:07

這是jsfiddle.net示例： http://jsfiddle.net/8s8p8/ – taylorthurlow 2012-02-20 07:09:06

我想空的表格單元格應包含至少一些內容，即使它只是 

來源

2012-05-02 18:43:59 Quantastical

圖像具有擴大的中間

回答

相關問題