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

时间:2015-10-09 15:58:57

标签: css text background-color wrapping heading

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

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

https://jsfiddle.net/j6x3uz5z/

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;设置允许,但希望保留通过“内联”实现的包装背景颜色。显示。

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

感谢。

1 个答案:

答案 0 :(得分:0)

你可以这样做。尝试:

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;
}