图像标题前后的行 [英] Line before and after title over image
本文介绍了图像标题前后的行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在居中标题前后创建一条行.线条和文本必须具有透明背景,以便能够将它们放置在不均匀的背景上.该行不能为 100% 宽度,如下所示:
I want to create a line before and after a centered title. The line and text must have a transparent background to be able to position them on a uneven background. The line must not be 100% width, like this:
标题文字可以更改:
- 标题的宽度未知
- 标题可以跨越多行
h1 {
text-align: center;
border-bottom: 1px solid #000;
}
<h1>Today</h1>
推荐答案
你可以在标题的两边做一个线,带有 2 个伪元素和边框:
You can make a line on both sides of the title with 2 pseudo elements and borders:
- 这适用于透明背景(线条和标题具有透明背景).
- 行长将适应标题宽度,因此无论标题长度如何,它们始终在同一位置开始和结束.
- 标题可以跨越多行,而左右行保持垂直居中(请注意,您需要将标题包裹在
标记使其工作.参见演示)
- This works over a transparent background (lines and title have transparent backgrounds).
- The line length will adapt to the title width so they alway start and end at the same position regardless to title length.
- The title can span on several lines while the left and right lines stay verticaly centered (Note that you need to wrap the title in a
<span>
tag for this to work. See demo)
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
body {
background-image: url(http://i.imgur.com/EzOh4DX.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
font-family: 'Open Sans', sans-serif;
}
h1 {
width: 70%;
margin: .7em auto;
overflow: hidden;
text-align: center;
font-weight:300;
color: #fff;
}
h1:before, h1:after {
content: "";
display: inline-block;
width: 50%;
margin: 0 .5em 0 -55%;
vertical-align: middle;
border-bottom: 1px solid;
}
h1:after {
margin: 0 -55% 0 .5em;
}
span {
display: inline-block;
vertical-align: middle;
}
<h1>Today</h1>
<h1>Today news</h1>
<h1><span>Today<br/>news</span></h1>
这篇关于图像标题前后的行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文