js改变网页背景颜色【js改变页面文档的背景色,需修改document对象的什么？】 收藏 0

HTML背景色教程–如何更改Div背景色，并通过代码示例进行了说明

作为Web开发人员，最常见的事情之一就是更改HTML元素的背景颜色。但是，如果您不了解如何使用CSS background-color属性，可能会产生混淆。在本文中，我们讨论以下几点

1.HTML元素的默认背景色值

2.如何更改div的背景颜色，这是非常常见的元素

3.该background-color属性会影响CSS盒子模型的哪些部分，以及

4.此属性可以采用的不同值。

div的默认背景颜色是transparent。因此，如果您不指定div的背景色，它将显示其父元素的背景色。

在此示例中，我们将更改以下div的背景颜色。

没有任何样式，它将在视觉上转换为以下内容。

让我们通过向类中添加样式来更改div的背景颜色。您可以通过尝试HTML文件中的示例进行操作。

这将导致以下结果：

看！我们已成功更改了该div的背景颜色。接下来，让我们更多地了解此属性。让我们看看background-color属性如何影响CSS-box模型的各个部分。

根据CSS框模型，所有HTML元素都可以建模为矩形框。每个盒子由4个部分组成，如下图所示。

如果您不熟悉Box模型，则可以查阅相关资料。问题是，当您更改div的背景颜色时，Box模型的哪一部分会受到影响？简单的答案是填充区域和内容区域。让我们通过一个例子来确认这一点。

这将导致：

从上面的示例中，我们可以看到空白区域和边框区域不受背景颜色变化的影响。我们可以使用border-color属性更改边框的颜色。边距区域保持透明，并反映父容器的背景色。

最后，让我们讨论background-color属性可以采用的值。

就像color属性一样，background-color属性可以采用六个不同的值。让我们通过一个示例考虑三个最常见的值。在示例中，我们将div的背景色设置为具有不同值的红色。

注意，它们的结果都是相同的背景色。

该background-color属性可以采用的其他值包括HSL值，特殊关键字值和全局值。这是每个例子。

设置元素的背景色时，重要的是要确保背景色和其包含的文本颜色的对比度足够高。这是为了确保弱视人士可以轻松阅读文本。

第一个div的背景颜色与文本颜间的对比度不够高，每个人都看不到。因此，除非您是唯一正在使用的网站，并且您的视力非常好，否则应避免这种颜色组合。

第二个div在背景颜色和文本颜间具有更好的对比度。因此，它使人们更容易阅读和阅读。

在本文中，我们看到了如何更改div的背景颜色。我们还讨论了CSS Box模型的哪些部分受背景颜色变化的影响。最后，我们讨论了background-color属性可以采用的值。

希望本文对您有所帮助。谢谢阅读。

Web页面如何实现深色模式？

随着 iOS 13 的发布，深色模式（Dark Mode）已越来越多地出现在大众的视野中，支持深色模式现在似乎已经成为现代移动应用和网站的一个潮流。深色模式有着深色模式的好处，首先不仅可以大幅减少电量的消耗，减弱强光对比，其次还能提供更好的可视性和沉浸感。

目前支持深色模式的系统有以下几种：

原生的安卓和IOS应用实现深色模式比较简单。

iOS

在 iOS 系统中，开发者可以从颜色和图片两个方面来进行适配，但不需要关心切换模式后该怎么操作，因为这些都由系统帮我们实现。颜色的适配，需要使用系统提供的 API，在回调用中不同的模式下分别设置颜色，而图片的适配，需要在 XCode 的 工具栏中 Appearances 下选择 Any，Dark，在同一名称资源的配置下分别添加图片资源。当切换深色模式时，系统会根据适配的颜色和图片资源进行查找和自动切换对应模式下的颜色和资源文件。

Android

安卓在 Android 10（API 级别 29）及更高版本中，可以通过以下三种方法启用深色主题背景：

• 使用系统设置（Settings -> Display -> Theme）启用深色主题背景
• 使用\”快捷设置\”图块，从通知托盘中切换主题背景（启用后）
• 在 Pixel 设备上，选择\”省电模式\”将同时启用深色主题背景，其他原始设备制造商 (OEM) 不一定支持这种行为

但Web页面没有这些接口，那怎么进行深色模式的适配呢？

Web页面实现深色模式，可以利用 CSS 的媒体查询方法：prefers-color-scheme (https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-color-scheme) 以及 CSS 变量 (https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)（CSS variables、CSS custom properties）。CSS 变量除了 IE，其余各大浏览器都支持的比较好，但 prefers-color-scheme 方法还处于 W3C 草案规范，需要对不兼容浏览器做向下兼容，具体浏览器兼容性可以查询 Can I Use (https://caniuse.com/#search=prefers-color-scheme)。

一、CSS 的媒体查询

prefers-color-scheme (https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-color-scheme) 是一种用于检测用户是否有将系统的主题色设置为亮色或者暗色的 CSS 媒体特性。 利用其设置不同主题模式下的 CSS 样式，浏览器会自动根据当前系统主题加载对应的 CSS 样式。light 适配浅色主题，dark 适配深色主题，no-preference 表示获取不到主题时的适配方案。如下：

来看一下效果，将系统设置为浅色外观：

将系统设置为深色外观：

二、CSS 变量 + 媒体查询

window.matchMedia (https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia) 方法可以用来查询指定的媒体查询字符串解析后的结果。 结合 CSS 变量和 matchMedia 的查询结果，可以设置对应的 CSS 主题颜色。该方法更灵活，可以单独抽离主题色进行适配。

CSS 变量的作用域与 CSS 的\”层叠\”规则一致，优先级最高的声明生效。所以，当 body 上存在 \”dark\” 类名时，:root .dark 会生效，否则 :root 生效。

使用 matchMedia 匹配主题媒体，深色模式匹配 (prefers-color-scheme: dark) ，浅色模式匹配 (prefers-color-scheme: light) 。

监听主题模式，深色模式时为 body 添加类名 dark，根据 CSS 变量的响应式布局特点，自动生效 dark 类名下的 CSS。

对于不支持 CSS 变量的 IE 浏览器怎么办呢？不做兼容性处理的话那页面可能就是一团糟了。所以，我们需要针对不兼容的浏览器做一些兜底处理，这里我们可以在 webpack 等构建工具中借助 post-css 的 postcss-css-variables (https://www.npmjs.com/package/postcss-css-variables) 插件来自动解析 CSS 变量对应的色值，并在原始 CSS 定义之上添加一条新的 CSS 样式，做到对不支持 CSS 变量浏览器的兼容。

用法如下：

如何让Threejs的canvas背景透明？

在Three.js中，要让Canvas的背景透明，只显示场景中的模型或物体，有两个关键点：

一、对渲染器（Renderer）进行alpha为true配置；

二、通过CSS设置，使canvas设定为透明背景模式。

以下是代码示例：

1. 设置Canvas的CSS样式

首先，确保canvas元素或其父元素没有设置背景色或背景图片，并且允许背景透明。可以通过CSS来实现：

2. 配置Three.js渲染器

在Three.js中，你需要配置渲染器（WebGLRenderer）以允许透明背景。这可以通过设置渲染器的alpha属性为true。

3. 确保场景和相机正确设置

确保场景（THREE.Scene）和相机（如THREE.PerspectiveCamera）已经正确设置，并且在场景中添加了想要显示的物体模型。

4. 渲染场景

在渲染循环中，使用渲染器渲染场景。

通常以上步骤，你可以在Three.js中创建一个只有模型显示，背景透明的场景。

此外，threejs开发的项目，是JS编程、运行于浏览器，他人只需在浏览器中右键查看网页源码，便可得获得源码，进而可以分析功能逻辑、可以复制、运行调试、了解功能原理。为了防止代码被任意分析、复制、盗用。threejs开发的功能在发布前通常需要先用JShaman、JS-Obfuscator、JsJiaMi.Online等工具进行JS代码混淆加密，以解决JS代码公开透明特性带来的不安全问题。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com