[英]CSS Background : Adding left padding via using repeat-x with single element
I try to create heading like this... 我尝试创建这样的标题...
Title --------------------
标题--------------------
This line with a custom image background 此行具有自定义图像背景
HTML : HTML:
<h2>Title</h2>
CSS : CSS:
h2 {background:url('line.png') repeat-x 15px 10px;}
Result : 结果:
Live : http://jsfiddle.net/5G2aq/ 直播: http : //jsfiddle.net/5G2aq/
I try to repeat this image with X-axis and add some padding into the left. 我尝试使用X轴重复此图像,并在左侧添加一些填充。
But it doesnt work, 15px
doenst work... or what ? 但这不起作用,
15px
确实起作用...还是什么?
PS :Try to do with a single element <h2>
, not :after
or full-long image PS:尝试使用单个元素
<h2>
,而不要使用:after
或全幅图像
Any trick ? 有什么把戏吗?
Do it like this, use :after
pseudo with content: "";
这样做,
:after
content: "";
:after
使用:after
伪content: "";
and be sure you use display: block;
并确保使用
display: block;
, now we use position: absolute;
,现在我们使用
position: absolute;
and assign position: relative;
并分配
position: relative;
to the container element. 到容器元素。 Last but not the least we use
overflow: hidden;
最后但并非最不重要的一点是,我们使用
overflow: hidden;
so that we don't get dirty scroll. 这样我们就不会弄脏滚动。
h2 {
position: relative;
overflow: hidden;
}
h2:after {
position: absolute;
height: 2px;
content: "";
display: block;
width: 100%;
top: 50%;
left: 60px;
background:url(http://oi39.tinypic.com/m7t8xw.jpg) repeat-x;
}
Coming to your solution, you are using repeat-x
, so you won't see the background-position
changing on the x
axis as the image is repeating, if you want to go for this approach, you shouldn't repeat. 来到您的解决方案中,您正在使用
repeat-x
,因此当图像正在重复时,您不会看到x
轴上的background-position
发生变化,如果您想采用这种方法,则不应重复。
Even better approach 更好的方法
Demo 2 OR Demo 3 (Using your image) 演示2或演示3 (使用图像)
<div><span>Hello</span></div>
div {
border-top: 1px solid #000;
margin: 20px;
position: relative;
}
div span {
display: block;
position: absolute;
top: -12px;
background: #fff;
padding-right: 10px;
}
The above way will be title width
independent, I would've chosen this way 上面的方式将与标题
width
无关,我会选择这种方式
Note: You can replace
div
withh2
注意:您可以将
div
替换为h2
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.