如何在CSS标签的中间有一条水平线? [英] How to have a horizontal line at the middle of a html heading with CSS?
本文介绍了如何在CSS标签的中间有一条水平线?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
确定我现在使用图片做,但我想通过CSS(没有绝对或相对定位,我想让它响应)。
示例: http://teothemes.com/ wp / services / 。标题是服务,在3个内容区域的上方...我想实现相同的效果与CSS。我尝试了一些,但没有成功。
谢谢。
解决方案>
以下是我的操作方式 - > http://tinkerbin.com/QN9efWHd
- CSS3背景图片
- 背景覆盖背景图片。
HTML ...
< p&
< span>服务或某事< / span>
< / p>
... for CSS ...
p {
background:linear-gradient(to bottom,rgba(145,37,37,0)49%,
rgba(145,37, 37%)51%,rgba(145,37,37,1)52%,
rgba(145,37,37,0)54%);
text-align:center;
}
span {
display:inline-block;
padding:0 10px;
background:#fff;
}
Ok I now use an image to do it, but I want to do it via CSS(no absolut or relative positioning, I'm looking to make it responsive).
Example here: http://teothemes.com/wp/services/. The heading is 'Services', right above the 3 content areas...I'd like to achieve the same effect with only CSS. I tried some things but it didn't work.
Thank you.
解决方案
Here's how I'd do it -> http://tinkerbin.com/QN9efWHd
- CSS3 background-image
- span with background covering the background image.
the HTML...
<p>
<span>Services or Something</span>
</p>
... for the CSS...
p {
background: linear-gradient (to bottom, rgba(145,37,37,0) 49%,
rgba(145,37,37,1) 51%, rgba(145,37,37,1) 52%,
rgba(145,37,37,0) 54%);
text-align: center;
}
span {
display: inline-block;
padding: 0 10px;
background: #fff;
}
这篇关于如何在CSS标签的中间有一条水平线?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文