Question

我试图在纯粹的CSS（无图像）中获得一定的外观。

我拥有的是：

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

我希望文本“title”的黑色背景与文本的宽度相同，但高度不同。

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

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

如果我得到正确的宽度，我无法改变高度，因为span是一个内联元素。如果我通过使跨度成为块来获得高度，我无法更改得到宽度恰好是文本的宽度，因为它现在是块级元素并扩展为页面的整个宽度。

任何想法，或者我只需要使用图像？

Answer 1

使用display:inline-block;。

请参阅this fiddle。

h2 {
    display:inline-block;
    height:60px;
    background-color:blue;
    color:white;
}

<h2><a>Hello.</a></h2>

Answer 2

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

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

这是jsFiddle。

Answer 3

将position: relative;应用于<a>，将position: absolute;应用于.title-bg <span>。然后根据需要设置top，left设为0，width和设置height。

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

Answer 4

CSS：

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

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

获取背景与文本宽度相同，但高度不同

4 个答案: