Question

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

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的代码，我需要同时应用图像和bckground颜色。请有人帮我这个。

Answer 1

当您只想更改单个值时，请勿使用简写符号。或者另一方面，如果您使用简写符号，请提供您不希望成为“默认”值的所有值。

使用：

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

或：

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

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

Answer 2

.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;
}

Answer 3

添加

.menu li:hover 
{ 
background:#3EBBEC url(image.jpg) no-repeat;
color: #FFFFFF; 
}

Answer 4

首先你的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);}

背景颜色和图像在李同时徘徊

4 个答案: