Question

我一直在摆弄h1和超链接背景颜色几个小时，我努力控制这个属性，以达到理想的风格。

理想情况下，我希望能够控制背景颜色突出显示的高度，但不要认为纯css可以实现这一点。我喜欢突出显示这里所示类型的亮点：

a.menu:hover {
color:#fff;
display:inline-block;
background-color:#f90703;
padding-right:6px;
text-decoration:none;   
}

虽然这是我想要实现的目标，但问题是当调整窗口大小并且副本环绕时，突出显示会运行到容器的整个宽度。

可以通过将显示设置更改为“内联”来解决此问题。然而，问题是background-color元素的大小扩大导致与上下类型的冲突：

https://jsfiddle.net/xzLkmeq0/

a.menu:hover {
color:#fff;
display:inline;
background-color:#f90703;
padding-right:6px;
text-decoration:none;   
}

不幸的是，我找不到中间立场。我喜欢舒适的贴合渲染“内联块”＃39;设置允许，但希望保留通过“内联”实现的包装背景颜色。显示。

任何想法都非常感激......

感谢。

Answer 1

你可以这样做。尝试：

http://codepen.io/anon/pen/qOjMYO

h2 {
    display:inline;
    font-size:96px;
    padding:0;
    color:#FFF;
    border:0;
    font-family:Helvetica,Arial,sans-serif;
    letter-spacing:-3px;
    word-spacing:-15px;
    font-weight:600;
    font-style:normal;
}

a:link,a:active,a:visited,a:hover,a.menu:link,a.menu:visited,a.header:link,a.header:active,a.header:visited,a.header:hover {
    color:#000;
    text-decoration:none
}

a.menu:active {
    color:#f90703;
    text-decoration:none
}

a.menu span { 
    position: relative
}

a.menu:hover {
    color:#fff;
    display:inline-block;
    background-color:#f90703;
    padding-right:6px;
    text-decoration:none;   
}

a.link {
    position:relative;
    color:#000;
    background-color:#fff;
    padding-left:3px;
    padding-right:3px;
    padding-top:50px;
    margin:0;
    text-decoration:none
}

a.link:hover {
    color:#fff;
    background-color:#f90703
}

.homemenu {
    position:absolute;
    left:20px;
    top:20px;
    width:auto;
    height:auto;
    z-index:20;
}

使用CSS调整标题背景颜色的大小

1 个答案: