CSS 下拉菜單

Question

我想用與屏幕一樣長的漂亮按鈕制作一個下拉列表（與更多屏幕兼容）......

我將使用 3 張圖像（左、中和右）......像這樣（當然，更小）：

中間部分將重復自身以“填充”按鈕。 我想得到這樣的東西：

沒有 3 張圖片的示例，我只能找到 2 張圖片。

Answer 1

試試這個 - 這使用了 3 個與 IE8 及以下不兼容的背景圖像，但您可以使用兩個內部 div 為您提供三個容器並在每個容器中放置一個圖像 - 請注意底部圖像最后列出。

nav {
     height:75px; /* height of graphic elements */
      background:
        url(images/left_end.png) no-repeat 0px 0px,
        url(images/right_end.png) no-repeat right top,
        url(images/center.png); /* this images repeats */
}

Answer 2

我的解決方案：

html：

<div class="button">
    <div class="left"></div>
    <div class="inner">text</div>
    <div class="clear"></div>
</div>

css：

* {margin: 0px; padding: 0px;}
.clear {clear: both; height: 0px; font-size: 0px; line-height: 0px;}

.button {
    padding-right: 15px; /* right image width */
    background: url('right_image.jpg') no-repeat right top;
    height: 20px; /* images height */
}

.button .left {
    background: url('left_image.jpg') no-repeat right top;
    width: 15px; /* left image width */
    height: 20px; /* images height */
    float: left;
}
.button .inner {
    height: 20px; /* images height */
    background: url('middle_image.jpg') repeat-x right top;
    text-align: center;
}

jsFiddle 演示

Answer 3

這很容易。

那是 html：

<button>
  <span><span> MENU </span></span>
</button>

您應該將圖像的所有部分放在一個非常寬的不透明（因為透明 png 方法更難一點）PNG（就像它在設計上看起來一樣），修剪到圖像內容。 （一張圖片不會增加太多尺寸，但會減少對服務器的 http 請求）。 它叫做精靈。

button {  }
button span { 
  padding:0 0 0 25px; 
  background:url('image.png') left 0; 
  display:inline-block; 
  height:25px; 
  line-height:25px; 
}
button span span { 
  padding:0 25px 0 0; 
  background:url('image.png') right 0; 
}

而已。 當然，您應該放置您的圖像名稱，以及填充、高度和行高的值。

Answer 4

沒有包含 3 張圖片的示例，因為您不需要 3 張圖片。 創建一個小的右側圖像（就像您在上面發布的那樣）並創建一個具有最大寬度（比如說 800 像素）的左 + 中心圖像。 在<li>上設置左側/背景圖像，並將右側掛在<a>上。

<li>
   <a href="#">Link</a>
</li>