使用CSS设置图像

Question

我有一个菜单包含Home＆amp;自助。当任何链接激活时，颜色为蓝色，否则为灰色。当悬停到任何链接时，颜色变为银色。

<ul id="menu">
<li><a href="#"class="c_active">Home</a></li>
<li><a href="#">Self Help</a></li>
</ul>

这是小提琴链接：Demo Link

我家有两张照片。一个是Active条件，另一个是Hover条件。我希望在链接处于活动状态时插入Home图标-A替换Home文本。

并希望在我悬停链接时插入主页图标-B。

我尝试使用内容css属性但未能成功插入图像。

感谢您的帮助。

Answer 1

最好使用＆＃39;之前＆＃39;和＆＃39;之后＆＃39;伪选择器。

我已将以下css添加到您的小提琴中;

#menu li {
    position:relative;
}
#menu li:first-child a:before {
    position:absolute;
    content:"";
    background:url('http://i.stack.imgur.com/h9tDF.jpg') no-repeat;
    width:20px;
    height:20px;
    background-size:contain;
    top: 9px;
    left: 14px;
}
#menu li:first-child a:hover:before {
    background:url('http://i.stack.imgur.com/FNFWi.jpg') no-repeat;
    background-size:contain;
}

http://jsfiddle.net/4fKR8/

Answer 2

如果您不希望“主页”文本显示在导航菜单中，则需要从html中删除该文本。

根据图像尺寸调整div的大小，或者根据用途调整图像大小。您需要使用css的background-image: url('Your link to image');属性将图像作为背景应用于任何div。

我通过应用上面提到的chages修改了你的代码。 这是JsFiddle link

Answer 3

使用背景位置

#menu li a{
   padding: 20px 10px;
   text-decoration: none;
   display: inline-block;
   width: 60px;
    height: 50px;
   background: url(http://3.bp.blogspot.com/_167-sL7Cczk/TBiMz6jdtYI/AAAAAAAABcs/JxqC2vCIFa4/s1600/cute-puppy-dog-wallpapers.jpg);
   background-repeat: no-repeat;
   background-size: 600px 221px;
   white-space:nowrap;
    border:1px solid red;
 }

http://jsfiddle.net/kisspa/cYW7K/

Answer 4

使用以下代码..像魅力一样......

<style>
    .home-img{
        width:210px;
        height:210px;
        background:url('http://i.stack.imgur.com/h9tDF.jpg') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    }

    .home-img:hover{
        width:210px;
        height:210px;
        background:url('http://i.stack.imgur.com/FNFWi.jpg') no-repeat scroll 0 0 rgba(0, 0, 0, 0);     
    }
</style>

<a href="#"><div class="home-img"></div></a>