【html】如何给桌面设置渐变背景，通过HTML代码实现

记录会话: ‎2024/‎6/‎2 16:32:48 - 16:34:21

记录的步骤: 37, 丢失的步骤: 0, 其他错误: 0

操作系统: 22621.1.amd64fre.ni_release.220506-1250 10.0.0.0.2.99

步骤 1: 用户在"项目视图 (列表)"上右键单击(在"G:\背景"中)
程序: Windows 资源管理器, 10.0.22621.2860 (WinBuild.160101.0800), Microsoft Corporation, EXPLORER.EXE, EXPLORER.EXE
用户界面元素: 项目视图, UIItemsView, Shell 文件夹视图, DUIListView, 文件夹布局窗格, Element, 浏览器窗格, HWNDView, DUIViewWndClassName, G:\背景, ShellTabWindowClass, G:\背景, CabinetWClass

步骤 2: 用户在"新建 (菜单项)"上左键单击(在"主机弹出窗口"中)
程序: Windows 资源管理器, 10.0.22621.2860 (WinBuild.160101.0800), Microsoft Corporation, EXPLORER.EXE, EXPLORER.EXE
用户界面元素: 新建, AppBarButton, ScrollViewer, 弹出窗口, Popup, ApplicationBar, ScrollViewer, Flyout, 弹出窗口, Popup, Microsoft.UI.Content.DesktopChildSiteBridge, G:\背景, ShellTabWindowClass, G:\背景, CabinetWClass

步骤 3: 用户在"文本文档 (菜单项目)"上左键单击(在"主机弹出窗口"中)
程序: Windows 资源管理器, 10.0.22621.2860 (WinBuild.160101.0800), Microsoft Corporation, EXPLORER.EXE, EXPLORER.EXE
用户界面元素: 文本文档, MenuFlyoutItem, MenuFlyout, 弹出窗口, Popup, Microsoft.UI.Content.DesktopChildSiteBridge, G:\背景, ShellTabWindowClass, G:\背景, CabinetWClass

步骤 4: 用户在"新建文本文档.txt (列表项目)"上左键单击(在"G:\背景"中)
程序: Windows 资源管理器, 10.0.22621.2860 (WinBuild.160101.0800), Microsoft Corporation, EXPLORER.EXE, EXPLORER.EXE
用户界面元素: 新建文本文档.txt, UIItem, 项目视图, UIItemsView, Shell 文件夹视图, DUIListView, 文件夹布局窗格, Element, 浏览器窗格, HWNDView, DUIViewWndClassName, G:\背景, ShellTabWindowClass, G:\背景, CabinetWClass

步骤 5: 用户在"名称 (编辑)"上左键双击(在"G:\背景"中)
程序: Windows 资源管理器, 10.0.22621.2860 (WinBuild.160101.0800), Microsoft Corporation, EXPLORER.EXE, EXPLORER.EXE
用户界面元素: 名称, UIProperty, 新建文本文档.txt, UIItem, 项目视图, UIItemsView, Shell 文件夹视图, DUIListView, 文件夹布局窗格, Element, 浏览器窗格, HWNDView, DUIViewWndClassName, G:\背景, ShellTabWindowClass, G:\背景, CabinetWClass

步骤 6: 用户在"项目视图 (列表)"上左键单击(在"记事本"中)
程序: NOTEPAD.EXE G:\背景\新建文本文档.TXT, NOTEPAD.EXE
用户界面元素: 项目视图, UIItemsView, Shell 文件夹视图, DUIListView, 文件夹布局窗格, Element, 浏览器窗格, HWNDView, DUIViewWndClassName, G:\背景, ShellTabWindowClass, G:\背景, CabinetWClass

步骤 7: 用户在"文本编辑器 (文档)"上左键单击(在"新建文本文档.txt - Notepad"中)
程序: NOTEPAD.EXE G:\背景\新建文本文档.TXT, NOTEPAD.EXE
用户界面元素: 文本编辑器, RichEditD2DPT, NotepadTextBox, 新建文本文档.txt - Notepad, Notepad

步骤 8: 用户在"文本编辑器 (文档)"上键盘输入(在"新建文本文档.txt - Notepad"中) [... Ctrl-V]
程序: NOTEPAD.EXE G:\背景\新建文本文档.TXT, NOTEPAD.EXE
用户界面元素: 文本编辑器, RichEditD2DPT, NotepadTextBox, 新建文本文档.txt - Notepad, Notepad

步骤 9: 用户在"关闭 (按钮)"上左键单击(在"*新建文本文档.txt - Notepad"中)
程序: NOTEPAD.EXE G:\背景\新建文本文档.TXT, NOTEPAD.EXE
用户界面元素: 关闭, PopupRoot, Windows.UI.Input.InputSite.WindowClass, DesktopWindowXamlSource, Windows.UI.Composition.DesktopWindowContentBridge, *新建文本文档.txt - Notepad, Notepad

步骤 10: 用户在"主机弹出窗口 (窗格)"上左键单击(在"主机弹出窗口"中)
程序: NOTEPAD.EXE G:\背景\新建文本文档.TXT, NOTEPAD.EXE
用户界面元素: 主机弹出窗口, Xaml_WindowedPopupClass, 新建文本文档.txt - Notepad, Notepad

步骤 11: 用户在"新建文本文档.txt - Notepad (窗口)"上左键单击(在"新建文本文档.txt - Notepad"中)
程序: NOTEPAD.EXE G:\背景\新建文本文档.TXT, NOTEPAD.EXE
用户界面元素: 新建文本文档.txt - Notepad, Notepad

步骤 12: 用户在"名称 (编辑)"上左键单击(在"G:\背景"中)
程序: Windows 资源管理器, 10.0.22621.2860 (WinBuild.160101.0800), Microsoft Corporation, EXPLORER.EXE, EXPLORER.EXE
用户界面元素: 名称, UIProperty, 新建文本文档.txt, UIItem, 项目视图, UIItemsView, Shell 文件夹视图, DUIListView, 文件夹布局窗格, Element, 浏览器窗格, HWNDView, DUIViewWndClassName, G:\背景, ShellTabWindowClass, G:\背景, CabinetWClass

步骤 13: 用户在"项目视图 (列表)"上键盘输入(在"G:\背景"中) [F2]
程序: Windows 资源管理器, 10.0.22621.2860 (WinBuild.160101.0800), Microsoft Corporation, EXPLORER.EXE, EXPLORER.EXE
用户界面元素: 项目视图, UIItemsView, Shell 文件夹视图, DUIListView, 文件夹布局窗格, Element, 浏览器窗格, HWNDView, DUIViewWndClassName, G:\背景, ShellTabWindowClass, G:\背景, CabinetWClass

步骤 14: 用户在"新建文本文档.txt (编辑)"上键盘输入(在"G:\背景"中) [Right Right Right Right Right Right Backspace Backspace Backspace ... Enter]
程序: Windows 资源管理器, 10.0.22621.2860 (WinBuild.160101.0800), Microsoft Corporation, EXPLORER.EXE, EXPLORER.EXE
用户界面元素: 新建文本文档.txt, UIRenameTextElement, 项目视图, UIItemsView, Shell 文件夹视图, DUIListView, 文件夹布局窗格, Element, 浏览器窗格, HWNDView, DUIViewWndClassName, G:\背景, ShellTabWindowClass, G:\背景, CabinetWClass

步骤 15: 用户在"是(Y) (按钮)"上键盘输入(在"重命名"中) [Enter]
程序: Windows 资源管理器, 10.0.22621.2860 (WinBuild.160101.0800), Microsoft Corporation, EXPLORER.EXE, EXPLORER.EXE
用户界面元素: 是(Y), CCPushButton, 重命名, TaskDialog, 重命名, #32770, G:\背景, CabinetWClass

步骤 16: 用户在"是(Y) (按钮)"上键盘输入(在"重命名文件"中) [Enter]
程序: Windows 资源管理器, 10.0.22621.2860 (WinBuild.160101.0800), Microsoft Corporation, EXPLORER.EXE, EXPLORER.EXE
用户界面元素: 是(Y), CCPushButton, 重命名文件, TaskDialog, 重命名文件, #32770, G:\背景, CabinetWClass

步骤 17: 用户在"名称 (编辑)"上右键单击(在"G:\背景"中)
程序: Windows 资源管理器, 10.0.22621.2860 (WinBuild.160101.0800), Microsoft Corporation, EXPLORER.EXE, EXPLORER.EXE
用户界面元素: 名称, UIProperty, 新建文本文档 (2).html, UIItem, 项目视图, UIItemsView, Shell 文件夹视图, DUIListView, 文件夹布局窗格, Element, 浏览器窗格, HWNDView, DUIViewWndClassName, G:\背景, ShellTabWindowClass, G:\背景, CabinetWClass

步骤 18: 用户在"打开方式 (菜单项)"上左键单击(在"主机弹出窗口"中)
程序: Windows 资源管理器, 10.0.22621.2860 (WinBuild.160101.0800), Microsoft Corporation, EXPLORER.EXE, EXPLORER.EXE
用户界面元素: 打开方式, AppBarButton, ScrollViewer, 弹出窗口, Popup, ApplicationBar, ScrollViewer, Flyout, 弹出窗口, Popup, Microsoft.UI.Content.DesktopChildSiteBridge, G:\背景, ShellTabWindowClass, G:\背景, CabinetWClass

步骤 19: 用户在"联想浏览器 (文本)"上左键单击(在"主机弹出窗口"中)
程序: Windows 资源管理器, 10.0.22621.2860 (WinBuild.160101.0800), Microsoft Corporation, EXPLORER.EXE, EXPLORER.EXE
用户界面元素: 联想浏览器, TextBlock, 联想浏览器, MenuFlyoutItem, MenuFlyout, 弹出窗口, Popup, Microsoft.UI.Content.DesktopChildSiteBridge, G:\背景, ShellTabWindowClass, G:\背景, CabinetWClass

步骤 20: 用户在"Chrome Legacy Window (窗格)"上右键单击(在"Document -联想浏览器"中)
程序: SLBrowser, 9.0.3.5211, Lenovo, SLBROWSER.EXE --SINGLE-ARGUMENT G:\背景\新建文本文档 (2).HTML, SLBROWSER.EXE
用户界面元素: Chrome Legacy Window, Chrome_RenderWidgetHostHWND, Document -联想浏览器, Chrome_WidgetWin_1

步骤 21: 用户在"Document (文档)"上左键单击(在"Document -联想浏览器"中)
程序: SLBrowser, 9.0.3.5211, Lenovo, SLBROWSER.EXE --SINGLE-ARGUMENT G:\背景\新建文本文档 (2).HTML, SLBROWSER.EXE
用户界面元素: Document, Chrome_RenderWidgetHostHWND, Document -联想浏览器, Chrome_WidgetWin_1

步骤 22: 用户在"Document -联想浏览器 (窗格)"上键盘输入(在"Document -联想浏览器"中) [... Shift-Win-S]
程序: SLBrowser, 9.0.3.5211, Lenovo, SLBROWSER.EXE --SINGLE-ARGUMENT G:\背景\新建文本文档 (2).HTML, SLBROWSER.EXE
用户界面元素: Document -联想浏览器, Chrome_WidgetWin_1

步骤 23: 用户在"选择窗格 (组)"上鼠标拖动开始(在"截图工具覆盖"中)
程序: SNIPPINGTOOL.EXE MS-SCREENCLIP:///?SOURCE=HOTKEY, SNIPPINGTOOL.EXE
用户界面元素: 选择窗格, NamedContainerAutomationPeer, Windows.UI.Input.InputSite.WindowClass, DesktopWindowXamlSource, Windows.UI.Composition.DesktopWindowContentBridge, 截图工具覆盖, XamlWindow

步骤 24: 用户在"选择窗格 (组)"上鼠标拖动结束(在"截图工具覆盖"中)
程序: SNIPPINGTOOL.EXE MS-SCREENCLIP:///?SOURCE=HOTKEY, SNIPPINGTOOL.EXE
用户界面元素: 选择窗格, NamedContainerAutomationPeer, Windows.UI.Input.InputSite.WindowClass, DesktopWindowXamlSource, Windows.UI.Composition.DesktopWindowContentBridge, 截图工具覆盖, XamlWindow

步骤 25: 用户在"微信 - 1 个运行窗口 (按钮)"上左键单击
程序: Windows 资源管理器, 10.0.22621.2860 (WinBuild.160101.0800), Microsoft Corporation, EXPLORER.EXE, EXPLORER.EXE
用户界面元素: 微信 - 1 个运行窗口, Taskbar.TaskListButtonAutomationPeer, Taskbar.TaskbarFrameAutomationPeer, Windows.UI.Input.InputSite.WindowClass, DesktopWindowXamlSource, Windows.UI.Composition.DesktopWindowContentBridge, 任务栏, Shell_TrayWnd

步骤 26: 用户在"文件传输助手 (窗口)"上鼠标拖动开始(在"文件传输助手"中)
程序: WeChat, 3.9.10.27, Tencent, WECHAT.EXE, WECHAT.EXE
用户界面元素: 文件传输助手, ChatWnd

步骤 27: 用户在"文件传输助手 (窗口)"上鼠标拖动结束(在"文件传输助手"中)
程序: WeChat, 3.9.10.27, Tencent, WECHAT.EXE, WECHAT.EXE
用户界面元素: 文件传输助手, ChatWnd

步骤 28: 用户在"文件传输助手 (窗口)"上左键单击(在"文件传输助手"中)
程序: WeChat, 3.9.10.27, Tencent, WECHAT.EXE, WECHAT.EXE
用户界面元素: 文件传输助手, ChatWnd

步骤 29: 用户在"文件传输助手 (窗口)"上键盘输入(在"文件传输助手"中) [... Ctrl-V Enter]
程序: WeChat, 3.9.10.27, Tencent, WECHAT.EXE, WECHAT.EXE
用户界面元素: 文件传输助手, ChatWnd

步骤 30: 用户在"G:\背景 (窗口)"上左键单击(在"Document -联想浏览器"中)
程序: SLBrowser, 9.0.3.5211, Lenovo, SLBROWSER.EXE --SINGLE-ARGUMENT G:\背景\新建文本文档 (2).HTML, SLBROWSER.EXE
用户界面元素: TITLE_BAR_SCAFFOLDING_WINDOW_CLASS, G:\背景, CabinetWClass

步骤 31: 用户在"显示桌面 (按钮)"上左键单击
程序: Windows 资源管理器, 10.0.22621.2860 (WinBuild.160101.0800), Microsoft Corporation, EXPLORER.EXE, EXPLORER.EXE
用户界面元素: 显示桌面, SystemTray.ShowDesktopButton, Windows.UI.Input.InputSite.WindowClass, DesktopWindowXamlSource, Windows.UI.Composition.DesktopWindowContentBridge, 任务栏, Shell_TrayWnd

步骤 32: 用户在"步骤记录器 - 1 个运行窗口 (按钮)"上左键单击
程序: Windows 资源管理器, 10.0.22621.2860 (WinBuild.160101.0800), Microsoft Corporation, EXPLORER.EXE, EXPLORER.EXE
用户界面元素: 步骤记录器 - 1 个运行窗口, Taskbar.TaskListButtonAutomationPeer, Taskbar.TaskbarFrameAutomationPeer, Windows.UI.Input.InputSite.WindowClass, DesktopWindowXamlSource, Windows.UI.Composition.DesktopWindowContentBridge, 任务栏, Shell_TrayWnd

步骤 33: 用户在"微信 - 1 个运行窗口 (按钮)"上左键单击
程序: Windows 资源管理器, 10.0.22621.2860 (WinBuild.160101.0800), Microsoft Corporation, EXPLORER.EXE, EXPLORER.EXE
用户界面元素: 微信 - 1 个运行窗口, Taskbar.TaskListButtonAutomationPeer, Taskbar.TaskbarFrameAutomationPeer, Windows.UI.Input.InputSite.WindowClass, DesktopWindowXamlSource, Windows.UI.Composition.DesktopWindowContentBridge, 任务栏, Shell_TrayWnd

步骤 34: 用户在"文件传输助手 (窗口)"上鼠标拖动开始(在"文件传输助手"中)
程序: WeChat, 3.9.10.27, Tencent, WECHAT.EXE, WECHAT.EXE
用户界面元素: 文件传输助手, ChatWnd

步骤 35: 用户鼠标拖动结束
程序: Windows 资源管理器, 10.0.22621.2860 (WinBuild.160101.0800), Microsoft Corporation, EXPLORER.EXE, EXPLORER.EXE
用户界面元素: SysListView32, SHELLDLL_DefView, WorkerW

步骤 36: 用户在"96d8bdeaff27812744763d8eb6d402e.png (列表项目)"上右键单击
程序: Windows 资源管理器, 10.0.22621.2860 (WinBuild.160101.0800), Microsoft Corporation, EXPLORER.EXE, EXPLORER.EXE
用户界面元素: 96d8bdeaff27812744763d8eb6d402e.png, SysListView32, SHELLDLL_DefView, WorkerW

步骤 37: 用户在"设置为桌面背景 (菜单项)"上左键单击(在"主机弹出窗口"中)
程序: Windows 资源管理器, 10.0.22621.2860 (WinBuild.160101.0800), Microsoft Corporation, EXPLORER.EXE, EXPLORER.EXE
用户界面元素: 设置为桌面背景, AppBarButton, ScrollViewer, 弹出窗口, Popup, ApplicationBar, ScrollViewer, Flyout, 弹出窗口, Popup, Microsoft.UI.Content.DesktopChildSiteBridge, XamlExplorerHostIslandWindow_WASDK

返回页面顶部...

完整代码：

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				height: 100vh;
			}

			body {
				background: linear-gradient(to bottom, lightblue, skyblue);
			}
		</style>
	</head>
	<body>

	</body>
</html>

嗯只需要将background里面的颜色替换为你自己想要的两种颜色就可以了