如何從覆蓋文本

也許這是一個非常愚蠢的問題，停止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

如何從覆蓋文本

回答

相關問題