也许这是一个非常愚蠢的问题,但是当我尝试增大字体大小时如何阻止 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>
关于html - 如何阻止 css 覆盖文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43459352/