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瓷砖图像。