CSS3 背景图像定位

Question

我决定尝试一些 CSS3，但遇到了一些背景图片问题。我的背景图像(六边形和箭头)显示不正确。六边形未显示在父元素中，我无法让箭头向右移动。

我正在使用 border-images 以便我可以水平调整元素的大小。

有什么建议吗？

这是它应该看起来的样子->

这是六边形 ->

这是箭头 ->

这是 anchor 元素背景->

这是列表项元素背景 ->

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

我已经编辑了我的 CSS。看看这个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;
}

如果你想要一个可拉伸(stretch)的li元素，那么拉伸(stretch)图片会很乱。在那种情况下，我建议您将图像分成 3 个部分。 1.左侧部分包括左箭头 Angular 和六边形 2.右侧部分包括小箭头和右 Angular 部分 3.a 1px x 1px tile image.