8

我试图在纯 css 中获得某种外观（无图像）。

我所拥有的是：

<h2>
    <a>TITLE</a>
</h2>

我希望文本“标题”具有与文本宽度相同但高度不同的黑色背景。

我试过这是各种排列：（即链接中的跨度，h2中的跨度，h2显示内联和跨度块）

<h2 class="title section-title">
    <a href="<?php echo site_url(); ?>/artwork/illustrations" >
        Illustrations<span class="title-bg"></span>
    </a>
</h2>

如果我得到正确的宽度，我不能改变高度，因为跨度是一个内联元素。如果我通过将跨度设置为块来获得正确的高度，则我无法将宽度更改为与文本的宽度完全相同，因为它现在是块级元素并扩展为页面的整个宽度。

有什么想法，还是我只需要使用图像？

4

4 回答 4

10

使用display:inline-block;.

看到这个小提琴。

h2 {
    display:inline-block;
    height:60px;
    background-color:blue;
    color:white;
}
<h2><a>Hello.</a></h2>

于 2012-07-12T16:05:20.807 回答
2

适用position: relative;于<a>和。position: absolute;_ .title-bg <span>然后根据需要设置 the top、leftto0和widthand height。

像这样的东西：http: //jsfiddle.net/minitech/3uzbV/

于 2012-07-12T16:04:00.310 回答
2

我使用的最简单的方法是line-height.

h2 a {color:#fff; line-height:40px; display:inline-block; background:#333;}​

这是一个jsFiddle。

于 2012-07-12T16:12:07.987 回答
1

CSS：

a {
    font-size:1em;
    padding:1em 0 1em 0;/*set top and bottom padding to make up extra height*/
    background-color:#063;
}

试试这个。即使是内联元素也可以有填充。

于 2012-07-12T16:06:21.377 回答