Question

所以我一直在寻找为什么我的背景没有显示出来的方法，请从我的bg css开始：

body {
  background-image: linear-gradient
  (to right, #0F2027, #203A43, #2C5364, #2C5364, #203A43, #0F2027) !important;
}

当我检查元素时，我的html和body的宽度均为0px，这就是为什么我猜不出来的原因。

我使用Bootstrap 3并将其从我的页面中删除确实解决了该问题，但是我使用Bootstrap了很多次，因此对我来说真的不起作用。

我目前使用的一种便宜的修复方法是在body标签内创建一个具有单个字符的跨度，然后使其不透明度为0并将其隐藏在角落，但这显然只是暂时的。

我尝试了能起作用的background-color，所以我猜Bootstrap 3与background-image或linear-gradient之间存在一些冲突。

有人知道解决此问题的正确方法吗？

编辑：正如评论中指出的那样，我意识到如果身体宽度为0px，则无法显示我的bg，但是是什么导致我的身体宽度为0px？

EDIT2：添加了可复制的HTML：

<!DOCTYPE HTML>
<htmL>
<head>
  <title>Index</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" href="css/mycss.css" />
 </head>
 <body>
 </body>
 </htmL>

Answer 1

导致此行为的原因是 normalize.less 中的规则margin:0。

如果将margin中的body设置为除0以外的任何值，则background-image将呈现。

body {
  margin: 1px;
  background-image: linear-gradient(to right, #0F2027, #203A43, #2C5364, #2C5364, #203A43, #0F2027);
}

Answer 2

您只需要在“ linear-gradient”之后删除一个空格。此css属性应像linear-gradient（）这样编写，并在方括号中放置代码。总体代码应如下所示。

body {background-image: linear-gradient(to right, #0F2027, #203A43, #2C5364, #2C5364, #203A43, #0F2027) !important;}

Bootstrap无法显示主体上具有线性渐变的背景图像

2 个答案: