如何为图像添加文字装饰？答案

【问题标题】：How to add text decoration to an image?如何为图像添加文字装饰？
【发布时间】：2013-08-19 14:54:08
【问题描述】：

我的日子有点难过。我创建了一些图标放在一些链接旁边。链接在悬停时具有“下划线”文本装饰效果。我添加了图标，它非常适合，只是当锚标签悬停时图标没有下划线。我做错了什么？

HTML

                    <a class="link" href="#"> 
                        <img src="images/home.png" alt="" id="home" class="icon"/>
                        home
                    </a>
                    <a class="link" href="about/">
                        <img src="images/about.png" alt="" id="about" class="icon"/>
                        About
                    </a>
                    <a class="link" href="contact/">
                        <img src="images/contact.png" alt="" id="contact" class="icon"/>
                        Contact
                    </a>
                    <a class="link" href="work/">
                        <img src="images/work.png" alt="" id="work" class="icon"/>
                        Work
                    </a>

CSS

#home {

    width: 15px;
    height: 15px;

}

#about { 

    width: 15px;
    height: 15px;

}

#contact {

    width: 19px;
    height: 15px;

}

#work {

    width: 16px;
    height: 15px;

}

.link {

    margin: 0;
    padding: 0;
    display: inline-block;
    line-height: 50px;
    width: 100px;
    font-size: 18px;
    font-family: arial;

}

.link:link {

    color: #ffffff;
    font-weight: bold;
    text-decoration: none;

}

.link:visited {

    color: #ffffff;
    font-weight: bold;
    text-decoration: none;

}

.link:active {

    color: #ffffff;
    font-weight: bold;
    text-decoration: none;

}

.link:hover {

    color: #ffffff;
    font-weight: bold;
    text-decoration: underline;

}

感谢您的帮助。

【问题讨论】：

标签： css image icons underline

【解决方案1】：

好吧，我想通了。我确实最终使用了边框方法。通过定义“链接”类的高度，我可以增加或减少从文本和图标到底部边框的距离。

对于遇到此问题的其他人，固定代码是...

HTML

        <div class="navbar">
                    <a class="link" href="#"> 
                        <img src="images/home.png" alt="" id="home" class="icon"/>
                        Home
                    </a>
                    <a class="link" href="about/">
                        <img src="images/about.png" alt="" id="about" class="icon"/>
                        About
                    </a>
                    <a class="link" href="contact/">
                        <img src="images/contact.png" alt="" id="contact" class="icon"/>
                        Contact
                    </a>
                    <a class="link" href="work/">
                        <img src="images/work.png" alt="" id="work" class="icon"/>
                        Work
                    </a>
        </div>

CSS

#home {

    width: 15px;
    height: 15px;

}

#about { 

    width: 15px;
    height: 15px;

}

#contact {

    width: 19px;
    height: 15px;

}

#work {

    width: 16px;
    height: 15px;

}

.link {

    margin: 0;
    padding: 0;
    display: inline-block;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 12px;
    height: 18px;
    font-size: 18px;
    font-family: arial;

}

.link:link {

    color: #ffffff;
    font-weight: bold;
    text-decoration: none;

}

.link:visited {

    color: #ffffff;
    font-weight: bold;
    text-decoration: none;

}

.link:active {

    color: #ffffff;
    font-weight: bold;
    text-decoration: none;

}

.link:hover {

    color: #ffffff;
    font-weight: bold;
    text-decoration: none; 
    border-bottom: 1px solid #ffffff;

}

【讨论】：

【解决方案2】：

你为什么不尝试这样的事情 ::（你不能用 text-decoration 属性在 img 下划线）

a{
margin-left:30px;
font-size:18px;
text-decoration:none;
}
a:hover { 
border-bottom:1px solid blue;
}

示例 :: FIDDLE

【讨论】：

我应该添加的，我也试过了。这里的问题是我不能使用边框属性，因为我使用 line-height 属性来对齐导航栏中的链接，因此边框显示在导航栏的底部，而不是单词下方。现在，我可以设置一个 margin-top 属性而不是 line-height，但它会不完美地对齐，这是我不想要的。第二个问题是，当我使用 margin-top 方法而不是 line-height 方法时，边框和文本之间的空间太宽，即使没有定义高度。其他解决方案？