Question

所以我有一个菜单，上面有一个带文字的按钮，我希望文本后面是一个图像，显示你在页面上，这是代码：

HTML：

<div id="menu">
    <div id="about"><a href="#">About Us</a></div>
</div>

CSS：

a {
    text-decoration:none;
    color: white;
    background: url(images/hover.png);
    width: 100%;
    height: 38px;
}

#about {
    background: url(images/button.png);
    width: 168px;
    height: 51px;
    font-family: Anivers;
    font-size: 20pt;
    text-align: center;
    color: white;
    line-height: 50px;
    vertical-align: middle;
    margin-top: 1%;
}

到目前为止，这么好，除了图像只显示与文本大小相对应的高度和宽度。例如，如果我将文本设为24pt，则其后面的图像会变大，但如果我将其缩小，图像将变小，我不希望这样。那么我该如何阻止它发生呢。我已经搜遍了整个地方，遗憾的是我找不到类似的话题。我希望你能帮帮我：）。

Answer 1

如果我正确理解了您的问题，您需要将display: block添加到<a>元素，然后设置height: auto;。至于图像，它不应该再缩放，我将图像集中用于演示目的。

DEMO

Answer 2

您可以通过显示＆＃34; a＆＃34;来完成此操作。元素作为＆＃34;块＆＃34;。这将允许您指定元素的大小，与字体的大小无关。然后你可以继承＆＃34;＃about＆＃34;的宽度和高度。 css造型如果＆＃34; hover.png＆＃34;的大小，或根据＆＃34; hover.png＆＃34;的实际大小指定自己的大小。如果它与＆＃34;＃about＆＃34;中所述的不同，则听起来像38px for hover.png是你想要的而不是#about父级的51px高度。没有设置＆＃34; a＆＃34;作为一个块，＆＃34;＃about＆＃34;中的文本的字体大小，即父元素，将统治a元素和样式的整体大小，以及你的背景＆＃34; images / hover.png＆＃ 34;只会提供相应尺寸的背景信息。

这里有你的css元素在38px高度时的样子，你也可以说＆＃34;继承＆＃34;如果需要，为高度。我测试了这个并且它有效：

a {
text-decoration:none;
color: white;
background: url(images/hover.png);
display: block;
width: inherit;
height: 38px;
}

我希望这会有所帮助。

Answer 3

<div id="menu">
    <img src="images/4.png" />      
    <a href="#">About Us</a>
</div>

#menu  {
    position: relative;
    width: 168px;
    height: 51px;
}
img  {
    width: 100%;
    height: auto;
}
img:hover  {
    background: blue;
}
a  {
    position: absolute;
    z-index: 100;
/*  top: 0;   PLACE LINK CORRESPOMNDING TO IMG 
    left: 0;  PLACE LINK CORRESPOMNDING TO IMG  */
    background: red;

    font-family: Anivers;
    font-size: 23pt;
    color: white;
    line-height: 1.2;
}

链接背后的图像

3 个答案: