我有一个有填充和阴影的字体,所以它们需要一起使用,填充在上面,阴影在下面。我已经能够像这样在另一个之上分层:link
我是通过相对和绝对定位来做到这一点的:
HTML:
<h1 class="fill">TEXT</h1>
<h1 class="shadow">TEXT</h1>
CSS:
.fill {
font-family: "Tilastia-Fill";
position: relative;
}
.shadow {
font-family: "Tilastia-Shadow";
position: absolute;
bottom: 50%;
}
当屏幕的方向从纵向变为横向时,我很难保持正确的外观,尤其是当我包含多行双层堆叠文本时。例如,当屏幕方向变为横向时,结果为:link
很明显,事情发生了变化,我不理解关于定位的一些基本内容。
最佳答案
您可以通过添加具有相对位置的父 div 使它们粘在一起
并使用相同的 css 根据此 div 定位两个文本
代码应该是这样的
div {
position: relative;
}
.fill {
font-family: "Tilastia-Fill";
position: absolute;
top:0;
left:0;
}
.shadow {
font-family: "Tilastia-Shadow";
position: absolute;
top:0;
left:0;
}
<div>
<h1 class="fill">TEXT</h1>
<h1 class="shadow">TEXT</h1>
</div>
如果你想让一个比另一个移动多一点,你可以玩 left, right, top , bottom
你应该使用像素而不是 %
你可以看到一个例子 HERE
关于html - 将文本定位在文本之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40833114/