Question

所以我正在创建一个网站，我已经有了背景设置。我在索引页面上也有一个标题但由于某种原因，文本周围有一个白框。我不知道为什么会这样，但它必须具有背景的颜色。

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;
}

Here是一个jsfiddle演示

Answer 1

这是你需要改变的两件事。

第一个是<head>中CSS文件的顺序。你最后需要你的风格，以便你的风格覆盖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>代码（请参阅here SO中的相关讨论）。

body { background-color: #1abc9c; }

Answer 2

这是小提琴链接 - https://jsfiddle.net/pravin7007/3szxo5su/

html, body {
    background-color: #1abc9c !important;
}

你的html中的

1。），应该在bootstrap.js之前加载JQuery
2。） bootstrap body css正在覆盖你的身体背景

Answer 3

您的正文标记上有background-color: #fff;。 body标签覆盖了具有所需背景颜色的html标签。看起来body标签从包含的bootstrap文件继承了白色背景，然后你就不会用你自己的样式覆盖它。

CSS文件按顺序处理，任何样式应用于最后添加到该元素的文件集中的最后一个选择器。因此，如果你加载你的css文件，那么如果bootstrap在同一个选择器上定义属性，那么你在这里定义的任何东西都将被bootstrap覆盖。

最好根据特异性加载css文件。由于bootstrap是一个共享库，并且您的样式文件特定于您的站点，因此您应该在引导程序之后加载您的css文件。通过这种方式，您可以保证您希望发生的事情将成为浏览器所做的事情。

您可以在此处找到有关selector specificity和load order的更多信息。选择器的特殊性要非常小心，很容易陷入混乱，只有在absolutely necessary时才能使用它（此链接来自优秀的CSS博客）。

您实际上还需要将新颜色应用于css中的body标签，而您当前没有这样做。将它应用于html将使得所需的颜色显示在正文颜色后面，因为html标记在DOM树结构的更上方。

这看起来像是带有.texts类的元素，你的标题是行为不端，因为body标签已经自动缩小以适应它的内容（see this fiddle for simplicity）。通过添加一些额外的<br />标记来扩展内容，正如我here所做的那样，您可以看到白色区域扩展以适应它们。另外，正如您可以看到here，通过将新颜色应用于.texts类，您可以看到它的颜色可以更改，因为它在DOM树的下方比body标签更远。

在文本后面的白色框

3 个答案: