如何使用 Bulma 更改网站的背景?

Posted

技术标签:

【中文标题】如何使用 Bulma 更改网站的背景?【英文标题】:How can I change the background of a website using Bulma? 【发布时间】:2018-02-21 03:24:24 【问题描述】:

所以我正在使用 CSS 框架 Bulma.io。 通常,没有它,当做 body background: black; 背景变黑。 但是当我使用 Bulma.io 时,只有文字背后的背景变成黑色,网站的其余部分保持白色。那么有人知道我怎样才能让整个网站像没有框架的情况下一样变黑吗?

【问题讨论】:

【参考方案1】:

您能否提供一个您正在使用的示例?下面我的 sn-p 显示了如何更改背景颜色。除了设置 background-color 属性,我还将 body 高度设置为视图的全高。

body 
  background-color: black;
  height: 100vh;
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.2/css/bulma.css" rel="stylesheet"/>
</head>
<body>
</body>
</html>

【讨论】:

【参考方案2】:

您可以通过从通用变量 [$body-background-color] 修改正文背景颜色来覆盖此变量,然后再导入 Bulma。一个简单的

解释现在可用https://bulma.io/documentation/customize/variables/

【讨论】:

【参考方案3】:

您可以申请background helper

<body class="has-background-grey-lighter"></body>

【讨论】:

【参考方案4】:

如果要改变整个页面的背景,需要给html标签一个颜色类。

示例:

 <html lang="en" class="has-background-dark"></html>

【讨论】:

以上是关于如何使用 Bulma 更改网站的背景?的主要内容,如果未能解决你的问题,请参考以下文章

如何使 bulma 表响应?

Bulma.io 全高英雄背景

如何使用页面上的视频更改正文的背景颜色

使用css将鼠标悬停在按钮上时如何更改站点背景图像?

如何在类python tkinter OOP中使用命令更改按钮的背景?

如何在不影响背景的情况下更改网页内容?