CSS背景分隔线的困难 [英] Difficulty with CSS background divider
本文介绍了CSS背景分隔线的困难的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我已经制作了带有四个按钮"的基本导航栏,并且正在使用背景图像作为分隔线.我遇到的问题是,当我创建:hover状态时,背景掩盖了分隔符.如何解决此问题,以便分隔线图像始终显示?
I have made a basic navigation bar with four 'buttons' and I am using a background image as a divider. The problem I am having is when I create a :hover state, the background covers up the divider. How can I fix this so that the divider image always shows?
这是标记:
<div>
<ul class="main">
<li><a href="#">Home</a></li>
<li><a class="divl" href="#">Item1</a></li>
<li><a class="divl" href="#">Item2</a></li>
<li><a class="divl" href="#">Item3</a></li>
</ul>
</div>
ul.main {
margin: 0;
padding: 0;
list-style: none;
width: 1000px;
background: url(grad.png) repeat-x;
overflow: hidden;}
ul.main li{
float: left;}
ul.main a {
padding: 0 3em;
line-height: 3em;
text-decoration: none;
display: block;
color: white;}
.divl {
background: url(a.png) repeat-y top left;}
ul.main a:hover,
ul.main a:focus{
background: rgba(0,200,0,0.1);}
谢谢.
推荐答案
您可以将分隔符 background-image
应用于 li
元素:
You can apply the divider background-image
to the li
elements instead:
ul.main li {
float: left;
background: url(http://dummyimage.com/1x100/f0f/fff) repeat-y top right;
}
请参阅: http://jsfiddle.net/825cK/
这篇关于CSS背景分隔线的困难的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文