[英]CSS better style heading element
请帮我。 现在如何使用CSS偷工减料作为背景图片插入background: url(../images/border.png) no-repeat center;
HTML代码:
<div class="heading">
<h1>About Us</h1>
</div>
CSS代码:
.heading {
text-transform: uppercase;
position: relative;
background: #000000
}
.heading h1 {
text-align: center;
overflow: hidden;
color: #fff;
white-space: nowrap;
text-overflow: ellipsis;
font: 30px/32px 'Roboto', sans-serif;
padding: 100px 0;;
background: url(../images/border.png) no-repeat center;
}
.heading h1:before,
.heading h1:after {
content: '';
width: 100%;
display: inline-block;
border-bottom: 1px solid;
height: 0;
vertical-align: middle;
}
.heading h1:before {
margin-left: -100%;
margin-right: 80px;
}
.heading h1:after {
margin-left: 80px;
margin-right: -100%;
}
您可以尝试线性渐变和转换演示以与
header { background: #333; display: flex; color: white; } header:before, header:after { content: ''; margin: auto 1em; border-bottom: solid 1px; flex: 1; } h1 { position: relative; padding: 0.25em 1em; overflow: hidden; background: linear-gradient(white, white) no-repeat top center, linear-gradient(white, white) no-repeat bottom center; background-size: calc(100% - 1.7em) 1px; } h1:before, h1:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: solid 1px; border-top: none; border-bottom: none; transform: skew(45deg) } h1:after { transform: skew(-45deg) }
<header> <h1>about us </h1> </header>
您可以使用currentcolor轻松更改文本和边框的颜色:
header { background: #333; display: flex; color: white; } header + header { color: pink; } header + header + header { color: gold; } header:before, header:after { content: ''; margin: auto 1em; border-bottom: solid 1px; flex: 1; } h1 { position: relative; padding: 0.25em 1em; overflow: hidden; background: linear-gradient(currentcolor, currentcolor) no-repeat top center, linear-gradient(currentcolor, currentcolor) no-repeat bottom center; background-size: calc(100% - 1.65em) 1px; } h1:before, h1:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: solid 1px; border-top: none; border-bottom: none; transform: skew(45deg) } h1:after { transform: skew(-45deg) }
<header> <h1>about us </h1> </header> <header> <h1>about us a bit longer</h1> </header> <header> <h1>& different color</h1> </header>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.