CSS3背景圖像定位

Question

我決定玩一些CSS3，並遇到了背景圖像的一些問題。我的背景圖像（六邊形和箭頭）顯示不正確。六角形沒有顯示在父元素中，我無法讓箭頭移動到右側。

我正在使用邊框圖像，以便可以水平調整元素的大小。

有什麼建議嗎？

這是它應該看起來像 - >

這是六邊形 - >

這是箭頭 - >

這是錨元素的背景 - >

這是Lis牛逼item元素背景 - >

JS Fiddle

HTML

<nav> 
    <ul> 
     <li> 
      <a href="">Examples</a> 
     </li> 
    </ul> 
</nav> 

CSS

nav { 
    font-family: sans-serif; 
    font-weight: 700; 
    font-size: 24px 
} 
li { 
    display: inline-block; 
    height: 107px; 
    border-width: 1px 32px 1px 32px; 
    -moz-border-image: url('http://markschamel.com/graphics/themes/misc/nav.li.background.png') 1 32 1 32 stretch stretch; 
    -webkit-border-image: url('http://markschamel.com/graphics/themes/misc/nav.li.background.png') 1 32 1 32 stretch stretch; 
    -o-border-image: url('http://markschamel.com/graphics/themes/misc/nav.li.background.png') 1 32 1 32 stretch stretch; 
    border-image: url('http://markschamel.com/graphics/themes/misc/nav.li.background.png') 1 32 1 32 stretch stretch; 
} 
a { 
    display: inline-block; 
    height: 45px; 
    border-width: 1px 14px 1px 14px; 
    -moz-border-image: url('http://markschamel.com/graphics/themes/misc/nav.a.background.png') 1 14 1 14 stretch stretch; 
    -webkit-border-image: url('http://markschamel.com/graphics/themes/misc/nav.a.background.png') 1 14 1 14 stretch stretch; 
    -o-border-image: url('http://markschamel.com/graphics/themes/misc/nav.a.background.png') 1 14 1 14 stretch stretch; 
    border-image: url('http://markschamel.com/graphics/themes/misc/nav.a.background.png') 1 14 1 14 stretch stretch; 
    text-decoration: none; 
    line-height: 45px; 
    padding: 0 10px; 
    margin: 31px 0 0 17px; 
    background: url('http://markschamel.com/graphics/themes/misc/nav.hex.background.png') no-repeat -50px center, 
    url('http://markschamel.com/graphics/themes/misc/nav.arrow.background.png') no-repeat right center; 
    color: #d92701; 
} 

Answer 1

JS Fiddle

除了閱讀名單上sliding doors的文章後，我曾在一個解決這個問題。我用Abhidev的建議將圖像分成三部分。

該解決方案還允許我縮小每個列表項目的寬度（例如，提供除自動以外的值到錨點元素）。

CSS

nav { 
    font-family: sans-serif; 
    font-size: 24px; 
    font-weight: 700; 
} 
nav ul { 
    height: 107px; 
} 
nav li { 
    display: inline-block; 
    height: 107px; 
    position: relative; 
} 
nav a { 
    display: inline-block; 
    color: #d92701; 
    text-decoration: none; 
    line-height: 4.5; 
    overflow: hidden; 
    height: 107px; width: auto; 
    background: transparent url('nav.background.expand.middle.png') repeat-x left top; 
    position: relative; 
    top: 0; 
    white-space:nowrap; 
} 
nav li:before { 
    content: ""; 
    float: left; 
    width: 64px; 
    height: 107px; 
    margin: 0; 
    background: transparent url('nav.background.expand.begin.png') no-repeat left top; 
} 
nav li:after { 
    content: ""; 
    float: right; 
    width: 58px; 
    height: 107px; 
    margin: 0; 
    background: transparent url('nav.background.expand.end.png') no-repeat right top; 
} 

HTML

<nav><ul><li><a href="">Hello World</a></li><li><a href="">Hello</a></li><li><a href="">Hello World Hello World</a></li></ul></nav> 

Answer 2

我已經編輯我的CSS。如果你想有一個伸縮li元素，然後拉伸圖像會亂碼在此http://jsfiddle.net/8y6XL/1/

CSS

nav { 
    font-family: sans-serif; 
    font-weight: 700; 
    font-size: 24px 
} 
li { 
    background: url("http://markschamel.com/graphics/themes/misc/nav.hex.background.png") no-repeat scroll 6px center, url("http://markschamel.com/graphics/themes/misc/nav.arrow.background.png") no-repeat scroll 223px center, url("http://markschamel.com/graphics/themes/misc/nav.li.background.png") no-repeat scroll left top transparent; 
    border-width: 1px 32px; 
    display: inline-block; 
    height: 107px; 
    text-align: center; 
    width: 271px; 
} 
a { 
    display: inline-block; 
    height: 45px; 
    border-width: 1px 14px 1px 14px; 

    -webkit-border-image: url('http://markschamel.com/graphics/themes/misc/nav.a.background.png') 1 14 1 14 stretch stretch; 
    -o-border-image: url('http://markschamel.com/graphics/themes/misc/nav.a.background.png') 1 14 1 14 stretch stretch; 
    border-image: url('http://markschamel.com/graphics/themes/misc/nav.a.background.png') 1 14 1 14 stretch stretch; 
    -moz-border-image: url("http://markschamel.com/graphics/themes/misc/nav.a.background.png") 1 14 1 14 stretch stretch; 
    border-width: 1px 14px; 
    color: #D92701; 
    display: inline-block; 
    height: 45px; 
    line-height: 45px; 
    margin: 31px 0 0 8px; 
    padding: 0 10px; 
    text-decoration: none; 
    width: 138px; 
} 

看看。我建議你把圖像分成三部分。 1.Left部分，包括左箭頭角和六角2.Right部分包括小箭頭和右角部分3.a 1px乘1px瓷磚圖像。