使用 CSS 设置图像 [重复]

Posted 2023-05-08

【中文标题】使用 CSS 设置图像 [重复]

【英文标题】：Setting Image with CSS [duplicate]

【发布时间】：2014-07-30 19:12:48

【问题描述】：

我有一个包含 Home & Self Help 的菜单。当任何链接处于活动状态时，颜色为蓝色，否则为灰色。将鼠标悬停在任何链接上时，颜色变为银色。

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

这里是小提琴链接：Demo Link

我有两张房子的图片。一个用于活动状态，另一个用于悬停状态。我想在 Link 处于活动状态时插入 Home Icon-A 替换 Home 文本。

当我悬停链接时想要插入主页图标-B。

我尝试使用 content css 属性，但无法成功插入图片。

感谢您的帮助。

【问题讨论】：

事实上 content 属性适用于 webkit 浏览器。

@KingKing: 是的。但是请您提供插入图标的正确方法。

不改变你的 html 代码是不容易的。

链接处于活动状态是什么意思？

就这么简单：jsfiddle.net/VnSH7

【参考方案1】：

最好使用 'before' 和 'after' 伪选择器来执行此操作。

我已将以下 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/

【参考方案2】：

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

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

我通过应用上述更改修改了您的代码。 这是JsFiddle link

【参考方案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/

【讨论】：

停止缩进你的句子，你把它们当作代码

【参考方案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>