如何从覆盖文本
问题描述:
也许这是一个非常愚蠢的问题,停止CSS,但如何从覆盖停止CSS当我试图更大的字体大小?如何从覆盖文本
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
html{
height: 100%;
}
body{
font-family: 'Fjalla One', sans-serif;
background: #2C3E50; /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #4CA1AF, #2C3E50); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #4CA1AF, #2C3E50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.container{
margin: auto;
}
h1{
text-transform: uppercase;
font-size: 60px;
line-height: 47px;
letter-spacing: 2px;
text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;
text-align: center;
}
.title{
transform: translateX(-50%) rotate(-5deg);
display: block;
margin-left:50%;
}
<body>
<!--Titel-->
<section class="container">
<h1>
<br />
<span class="title" >
<label style="color:#e55643;">Burger</label><label style="color:#2b9f5e;">school</label>
</span>
<span class="title" style="color:#f1c83c;">afspraken</span>
</h1>
</section>
</body>
感谢上您的帮助。我刚开始如此反复,也许这是一个非常愚蠢的问题..
答
你必须调整line-height
为好,例如设置它像font-size
到60px
。文字重叠,如果line-height
是小对于给定font-size
。
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
html {
height: 100%;
}
body {
font-family: 'Fjalla One', sans-serif;
background: #2C3E50;
/* fallback for old browsers */
background: -webkit-linear-gradient(to top, #4CA1AF, #2C3E50);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #4CA1AF, #2C3E50);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.container {
margin: auto;
}
h1 {
text-transform: uppercase;
font-size: 60px;
line-height: 60px;
letter-spacing: 2px;
text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;
text-align: center;
}
.title {
transform: translateX(-50%) rotate(-5deg);
display: block;
margin-left: 50%;
}
<section class="container">
<h1>
<span class="title">
<label style="color:#e55643;">Burger</label><label style="color:#2b9f5e;">school</label>
</span>
<span class="title" style="color:#f1c83c;">afspraken</span>
</h1>
</section>
答
在你的代码已经设置了line-height : 47px;
,但你想提高你的字体大小比的line-height更大。
font-size: 60px;
line-height: 47px; <!--This is what causing the problem, increase it as much as you increase the font size-->
例如:
font-size: 60px;
line-height: 60px; <!--It will do the job-->
答
变化line-height:47px;
,增加它等于字体大小
不胜感激!感谢您的帮助 –
不客气,很高兴我能帮助! – andreas
嗨,每次我试了一下还是在冷却之后,我会重试:) –