文字后面的白框

Jacksons 发表于 Dev

杰克逊

因此，我正在创建一个网站，并且已经设置了背景。我在索引页面上也有标题，但是由于某种原因，文本周围有一个白框。我不知道为什么要这么做，但是必须要有背景色。

的HTML

<!doctype html>
<html>
<head>

    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

  <title></title>
</head>
<body>
<p class="texts">Under Construction</p>
    </body>
</html>

的CSS

@font-face {
    font-family: 'Font';
    src: url(BebasNeue_Light.otf);
}

.texts{
    font-family: 'Font';
    text-align: center;
    font-size: 1000%;
}

html { 
background-color: #1abc9c;
}

这是一个jsfiddle演示

塔索斯（Tasos K.）

这是您需要更改的两件事。

首先是CSS文件在中的顺序<head>。您需要最后一个样式，以便您的样式覆盖Bootstrap的样式。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="style.css">

第二个是更改html {...}CSS规则并body改为使用。虽然可以为<html>标签设置样式，但是最好改用<body>标签（请参见此处的相关讨论）。