Question

我正在尝试为我的六角形菜单添加背景图像，我将其用作主导航。但我无法弄清楚如何实现代码将背景图像带入六边形菜单。您可以在下面看到CSS和HTML代码。

CSS

    ul.hex {padding:0; margin: 50px auto; list-style: none; width:104px; height:60px;       position:relative;} 

    ul.hex li a {display:block; width:104px; height:60px; position:absolute; left:0; top:0;    z-index:100; text-align:center; text-decoration:none; font:normal 18px/60px "Arial"; color: #fff;
    outline: 0;
}

    ul.hex li a:before {display: block; content:""; width:104px; height:60px; position:absolute;    left:0; top:0; z-index:-1;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}

ul.hex li a:after {display:block; content:""; width:104px; height:60px; position:absolute; left:0; top:0; z-index:-1;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}

ul.hex li:nth-child(1) a,
ul.hex li:nth-child(1) a:before,
ul.hex li:nth-child(1) a:after {background:#cb3927;
}

ul.hex li:nth-child(1) a:hover,
ul.hex li:nth-child(1) a:hover:before,
ul.hex li:nth-child(1) a:hover:after {background-color:#cb3927; color:#fff;
}

ul.hex li:not(:first-child) a,
ul.hex li:not(:first-child) a:before,
ul.hex li:not(:first-child) a:after {background-color:#fff; color:#8d0f26;
}

ul.hex li:not(:first-child) a:hover,
ul.hex li:not(:first-child) a:hover:before,
ul.hex li:not(:first-child) a:hover:after {background-color:#8d0f26; color:#f36e33 ;
}

ul.hex li {width:104px; height:60px; position:absolute; left:106px; top:0;
-webkit-transform-origin: -54px 30px;
-moz-transform-origin: -54px 30px;
-ms-transform-origin: -54px 30px;
-o-transform-origin: -54px 30px;
transform-origin: -54px 30px;
}

ul.hex li:nth-child(1) {left:0;}

ul.hex li:nth-child(3) {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}

ul.hex li:nth-child(3) a {
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}

ul.hex li:nth-child(4) {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
}

ul.hex li:nth-child(4) a {
-webkit-transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-ms-transform: rotate(-120deg);
-o-transform: rotate(-120deg);
transform: rotate(-120deg);
}

ul.hex li:nth-child(5) {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

ul.hex li:nth-child(5) a {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}`

HTML 这里是我用于导航的链接的无序列表

<div id="hexagon">
<ul class="hex">
    <li><a href="">HOME</a></li>
    <li><a href="">ABOUT</a></li>
    <li><a href="">BLOG</a></li>
    <li><a href="">WORK</a></li>
    <li><a href="">CONTACT</a></li>
</ul>
</div>

Answer 1

我认为THIS之前回答的问题可以派上用场他基本上以一种略微不同的方式建造外野，不太难实施。

为每个菜单添加背景图像

1 个答案: