如何从覆盖文本

也许这是一个非常愚蠢的问题，停止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>

感谢上您的帮助。我刚开始如此反复，也许这是一个非常愚蠢的问题..

来源

2017-04-17 Lucas Verhoest

你必须调整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>

来源

2017-04-17 20:50:29 andreas

不胜感激！感谢您的帮助 –

不客气，很高兴我能帮助！ – andreas

嗨，每次我试了一下还是在冷却之后，我会重试:) –

在你的代码已经设置了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-->

来源

2017-04-17 20:56:05

变化line-height:47px;，增加它等于字体大小

来源

2017-04-17 21:08:36 Love

如何从覆盖文本

回答

相关问题