我一直在摆弄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;设置允许,但希望保留通过“内联”实现的包装背景颜色。显示。
任何想法都非常感激......
感谢。
答案 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;
}