问题描述
我正在开发一些CSS,其中设计要求页面标题(标题)以垂直居中在任一侧的水平线为中心。此外,在页面上有背景图像,所以标题的背景需要是透明的。
I am working on some CSS where the design calls for page titles (headings) to be centered with horizontal lines that are vertically centered on either side. Further, there is a background image on the page so the background of the title needs to be transparent.
我有标题的中心,我可以使用伪类来创建行。但我需要的线消失,当它穿过标题的文本。
I have centered the title and I can use pseudo class to create the line. But I need the line disappear when it cross the text of the title.
我考虑使用一个透明的背景渐变,这是因为每个标题可能有不同的长度,我不知道放在哪里。
I considered using a background gradient that goes transparent where the words are, but since each title could be a different length, I wouldn't know where to put the stops.
以下是到目前为止的CSS:
`
Here is the CSS so far:`
h1 {
text-align: center;
position: relative;
font-size: 30px;
z-index: 1;
}
h1:after {
content: '';
background-color: red;
height: 1px;
display: block;
position: absolute;
top: 18px;
left: 0;
width: 100%;
}
`
这里是我的位置:
推荐答案
看看这个,此处是您的答案。
Look at this http://blog.goetter.fr/post/36084887039/tes-pas-cap-premiere-edition , here is your answer.
这是您的原始程式码已修改
Here is your original code modified
h1 {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
h1:before, h1:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 1px;
content: '\a0';
background-color: red;
}
h1:before {
margin-left: -50%;
text-align: right;
}
.color {
background-color: #ccc;
}
注意:文章已不在线了,这里是最后一个很好的归档版本:
Note: the article is not online anymore, here is the last good archived version:http://web.archive.org/web/20140213165403/http://blog.goetter.fr/post/36084887039/tes-pas-cap-premiere-edition
这篇关于朝向与任一侧的水平线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!