0

我有一个代码，我想同时应用图像和背景颜色。有人可以帮我吗？

CSS

    .menu, .menu ul
{
    width:1000px;
    background-color: #F3F3F3;
    margin: 0;

}
.menu{  padding: 0; height:30px;}
.menu li
{
    float: left;
    padding-top:3px;
    height:20px;
    text-align:left;
    text-transform:uppercase; 
    position: relative; 
    display: block;
    font-family: Tahoma;
    font-size: 8px;
    font-weight:bold;
    text-align: center;
    text-decoration: none;
    padding:10px 15px 0 15px;
    background:url(../image/border.png) no-repeat right center;
}

.menu li:hover
{       
    background:#3EBBEC; 
    color: #FFFFFF;
}
.menu a { text-decoration: none; color:#000000; }
.menu a:hover { text-transform:lowercase; }

HTML

<ul class="menu">
   <a href="#"><li>A</li></a>  
   <a href="#"><li>B</li></a> 
   <a href="#"><li>C</li></a>
   <a href="#"><li>D</li></a>   
</ul>

这是我需要同时应用图像和背景颜色的 HTML 和 CSS 的代码。请有人帮我解决这个问题。

4

4 回答 4

2

当您只想更改单个值时，不要使用速记符号。或者，如果您使用速记符号，请提供您不想成为“默认”值的所有值。

利用：

.menu li:hover
{       
    background-color: #3EBBEC; 
}

或者：

.menu li:hover
{       
    background: #3EBBEC url(...) ...; 
}

请记住，当您使用速记时，所有未提供的值都将回退到它的默认值，而不是它的继承值。

于 2012-05-07T11:22:26.827 回答
1 
.menu li {
    background: #color url(path to img);
}
.menu li:hover {
    background: #hover-color url(path to hover-img);
    /* or if only color is changed just write */
    background-color: #hover-color;
}
于 2012-05-07T12:38:14.333 回答
1

添加

.menu li:hover 
{ 
background:#3EBBEC url(image.jpg) no-repeat;
color: #FFFFFF; 
}
于 2012-05-09T11:38:09.170 回答
0

首先你的 HTML 应该是这样的

<ul class="menu">
   <li><a href="#">A</a></li>
   <li><a href="#">B</a></li>
   <li><a href="#">C</a></li>
   <li><a href="#">D</a></li>
</ul>

CSS

ul.menu li{display:block; width:100px; height:30px; background:url(yourbackgroundimage.png);}
ul.menu li a{display:block; width:100px; height:30px; background:url(yoursecondbackgroundimage.png);}

如果你想添加悬停状态

ul.menu li{display:block; width:100px; height:30px; background:url(yourbackgroundimage.png);}
ul.menu li:hover{background:url(yourhoverbackgroundimage.png);}
ul.menu li a, ul.menu li a:visited{display:block; width:100px; height:30px; background:url(yoursecondbackgroundimage.png);}
ul.menu li a:hover{background:url(yoursecondbackgroundimagehover.png);}
于 2012-05-07T12:27:24.813 回答