Question

想知道这是否是将图像添加到导航开头和结尾的最佳方法。目前我的导航看起来像这样：

enter image description here

但实际上我想将这个角落片添加到它的边缘：

enter image description here

这是我试图实现它的CSS：

#menu-top {
    position:relative;
    margin:0 -10px 0;
    padding:.25em 0 0;
    border-width:0;
    color:#fff;
    text-align:left;
    background: url( http://www.leaguememe.co.uk/wp-content/uploads/2014/01/Horizontalbannermiddletop.png );

    min-height:50px;
}
#menu-top:before {
    content:'';
    z-index: 20;
    background: url( http://www.leaguememe.co.uk/wp-content/uploads/2014/01/Horizontaltop_left.png );
    position:absolute;
    left:0;
    /* bottom:-5px; */
    bottom: 0px;
    width:0;
    height:0;
    display:block;
    border-color:transparent #222 transparent transparent;
    border-style:solid;
    border-width:0px 10px 5px 0;
}
#menu-top:after {
    content:'';
    position:absolute;
    right:0;
    bottom:-5px;
    width:0;
    height:0;
    display:block;
    border-color:transparent transparent transparent #222;
    border-style:solid;
    border-width:0 0 5px 10px;
}
#menu-top ul {
    position:relative;
    margin:0;
    padding:.5em 30px;
    list-style-type:none;
    text-align:center;
}
#menu-top ul:before {
    content:'';
    position:absolute;
    top:4px;
    left:-5px;
    width: 34px;
    height: auto;
    display:block;
    background: url( http://www.leaguememe.co.uk/wp-content/uploads/2014/01/Horizontaltop_left.png );
}
#menu-top ul:after {
    content:'';
    position:absolute;
    top:4px;
    right:-5px;
    width:27px;
    height:39px;
    display:block;
}
#menu-top li {
    display:inline;
    margin:0 .25em 1em;
    padding:0;
    line-height:2.5em;
}
#menu-top li a {
    background-color: #111;
    color: #e9d6d6;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    outline: 0;
    padding: .45em .6em;
    white-space: nowrap;
    -webkit-transition: background-color, -webkit-box-shadow 0.2s linear;
}
#menu-top li a:hover,
#menu-top li a:active {
    text-decoration:none;
}

我是否使用了：之前和：错误之后？

Answer 1

您可以通过多种方式执行此操作，包括使用伪元素。在下文中，我在我的nav元素的左上角和右上角放置了两个元素。然后我分配了新的背景图像，并将元素向右翻转，使其镜像在左侧：

nav {
    position: relative;
    width: 703px; height: 45px;
    background: url("http://i.stack.imgur.com/PMV59.png");
}

nav::before, nav::after {
    content: "";
    display: block;
    width: 95px; height: 50px;
    position: absolute; top: -8px; left: -5px;
    background: url("http://i.stack.imgur.com/IqsBV.png");
}

nav::after {
    left: auto; right: -5px;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

结果如下：

enter image description here

我应该注意，transform属性仅被使用，因为您只提供了左角图像。 Internet Explorer 8（支持:before和:after）不支持此属性。如果您希望上述内容支持IE8，则需要放弃transform，而是为:after伪元素提供不同的背景。

演示：http://jsfiddle.net/NXP3g/1/

使用：之前和：之后将图像添加到导航结束？

1 个答案: