[英]How to stack text with pure CSS?
我想使用一个文本作为其他文本的背景。 基本上,通过使用两个具有适当position
和z-index
设置的div
元素,这很容易,如CSS中是否可以使用将文本用作背景? 。
我的问题是,尽管它们的大小不同,但我想同时对齐两个文本。 背景文本较大,前景文本应与背景文本垂直对齐,以使两个文本的垂直中心位于同一位置。
我可以通过手动调整以像素为单位的位置来实现,但是我必须针对要单独使用的每种字体大小执行此操作。 而且,我永远不能确定这在每种浏览器中都以相同的方式起作用。
有更好的替代方法吗?
我通过使用它得到的:
<div style="position: relative; font-size: 100pt; height: 100px;">
<div style="font-size: 2em; color: #f00; position: absolute; top: 0; left: -0.37em; bottom: 0; right: 0; z-index: -1; line-height: 0.4em;">
B
</div>
Sample text
</div>
使用left
和line-height
属性,我可以对齐两个文本,当我增加容器的font-size
时,它们的相对对齐方式保持不变。
垂直对齐可以这样进行:
.parent {
position:relative;
zoom:1;/*has layout for ie*/
}
.verticalcentered1, .verticalcentered2 {
position:absolute;
top:50%;
height:20px;
margin-top:-10px;/*half the height*/
}
.verticalcentered1 {z-index:1;}
.verticalcentered2 {z-index:2;}
如果verticalcentered元素是您的文本,则它们将在父级中垂直居中并彼此重叠(如果那就是您要查找的内容)。
我认为您看起来像这样:- 演示
的HTML
<div id="container">
<div id="background">Sample Some Text </div>
B
</div>
的CSS
#container {
position: relative;
font-size:70px;
color:#00c7ff;
z-index:-1;
}
#background {
left: 20px;
position: absolute;
right: 0;
top: 25%;
z-index: 10;
color:black;
font-size:20px;
}
是的,您可以使用其他方式-占位符文本
键入新文本时,文本将被自动删除,然后默认文本将被删除
//文本框
<input type="text" defaultvalue="Name" value="Name" name="add_name" id="add_name">
// Javasript代码
//For the placeholder
$('#add-category input[type=text]').focus(function() {
if ($(this).val() == $(this).attr('defaultValue')) {
$(this).val('');
}
});
$('#add-category input[type=text]').blur(function() {
if ($(this).val() == '') {
$(this).val($(this).attr('defaultValue'));
}
});
试试上面的选项。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.