Question

好吧，现在一直在努力解决这个问题，而且我现在几乎都有我想要的外观，但我现在正在努力定位这些物品。基本上我想要一个带有描边的描边文本，这意味着webkit文本描边没用。

所以我想我会将两个文本元素放在彼此的顶部并按这样做。这很有效，除非我使用position：绝对元素本身没有高度。

HTML看起来像这样：

<div class="hcontainer"
    <h2>A Framework For Web Artisans</h2>
    <span class="h2white">A Framework For Web Artisans</span>
</div>

这样的CSS：

h2{font-size:2em; 
margin: 10px 0;
color:#234F70;
-webkit-text-stroke: 10px #531A16;
-webkit-text-fill-color:#FFF;
letter-spacing:-2px;
position:absolute; 
top:10px; 
left:0px;}

.h2white{font-family:dom_bold,arial black;
font-size:2em; 
margin: 10px 0;
color:#FFF;
position:relative; 
top:10px; left:0px;
letter-spacing:-2px;
position:absolute;}

.hcontainer{position:relative;clear:both;height:2em;}

所以这就是问题所在。 hcontainer需要有一个设定的高度，因为它包含的元素绝对定位因此没有高度并且扰乱流动。问题是使高度变得动态，所以我可以正确地分隔元素。

我可以为每个标题创建一个单独的容器，但这看起来有点多。任何人都可以想到一个更好的方法来做我想在这里做的事情吗？或者解决高度问题？

http://jsfiddle.net/calder12/9M7YZ/

Answer 1

我真的不明白这意味着什么“问题是让高度动态，所以我可以正确地放置元素。”但是如果你不想在.hcontainer上声明一个高度，你可以使用.h2white上的负上边距将它放在红色h2的顶部，而不是使用绝对定位。像这样：

http://jsfiddle.net/9M7YZ/10/

.h2white{
    font-family:lemon;
    font-weight:bold;
    font-size:4em;
    color:#FFF;
    letter-spacing:-2px;
    margin-top:-86px;
    position:absolute;
}

CSS文本笔划外的字母

1 个答案: