可以，而且如果你的目标是：

> 每次打开 `https://mp.weixin.qq.com/` 时，都让浏览器**根本不要请求**这张 `bg_banner...png`，而不仅仅是把它隐藏掉，

那么应该做的是**网络请求级别的拦截**，而不是改 CSS。

## 最简单：Chrome / Edge DevTools 临时拦截

Chrome 和 Edge 的 DevTools 都提供了 `Network request blocking` 功能，可以直接按照完整 URL 或通配符阻止网络请求。Chrome 官方文档和 Microsoft Edge 官方文档都确认支持这种方式。([Chrome for Developers][1])

打开：

`https://mp.weixin.qq.com/`

按 `F12`，然后可以使用：

```text
Ctrl + Shift + P
```

输入：

```text
block
```

选择：

```text
Show Network request blocking
```

然后点击 `Add pattern`，加入：

```text
https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/login/loginpage/images/bg_banner.5951b7fdf2d.png
```

勾选：

```text
Enable network request blocking
```

刷新微信公众平台页面。

此时这张图片的请求会直接被浏览器阻止。Edge 官方文档还明确说明，既可以填写完整 URL，也可以使用 `*` 通配符。([Microsoft Learn][2])

你也可以更简单地进入：

```text
F12
→ Network
→ 刷新页面
```

找到：

```text
bg_banner.5951b7fdf2d.png
```

右键：

```text
Block request URL
```

然后再次刷新。

这对于你现在研究网页布局非常方便。

---

## 更推荐：永久自动屏蔽这张背景图片

如果你的真实需求是：

> 我以后每次正常打开微信公众平台，不打开 DevTools，也不加载这张图。

那么更适合使用浏览器内容过滤扩展。

例如 `uBlock Origin` 或当前 Chromium 浏览器使用的 `uBlock Origin Lite`。截至 2026 年，`uBlock Origin Lite` 已经加入自定义过滤规则和外部过滤列表能力。([GitHub][3])

加入这样一条网络过滤规则即可：

```text
||res.wx.qq.com/mpres/zh_CN/htmledition/pages/login/loginpage/images/bg_banner.5951b7fdf2d.png$image,from=mp.weixin.qq.com
```

这条规则可以拆开理解：

```text
||res.wx.qq.com
```

表示目标资源来自：

```text
res.wx.qq.com
```

后面的：

```text
/mpres/zh_CN/htmledition/pages/login/loginpage/images/bg_banner.5951b7fdf2d.png
```

进一步精确到这一张图片。

而：

```text
$image
```

限制目标资源类型为图片。

最后：

```text
from=mp.weixin.qq.com
```

意味着只有当请求是由：

```text
mp.weixin.qq.com
```

页面发起时才拦截。

`from=` 是 uBlock 的 `domain=` 别名，用于限制过滤规则应用在哪个页面来源上；这些过滤语法在 uBlock 官方 Wiki 中都有说明。([GitHub][4])

因此它不会粗暴地封杀整个：

```text
res.wx.qq.com
```

域名。

这点非常重要，因为微信页面大量 JS、CSS、字体和图片都放在 `res.wx.qq.com`。

---

## 我更建议你使用通配符

你现在给出的文件是：

```text
bg_banner.5951b7fdf2d.png
```

但注意这里的：

```text
5951b7fdf2d
```

很可能是构建系统生成的资源版本 Hash。

下一次腾讯发布前端版本，它完全可能变成：

```text
bg_banner.a83e6214.png
```

或者：

```text
bg_banner.6f12ab783c.png
```

这样你精确屏蔽：

```text
bg_banner.5951b7fdf2d.png
```

就失效了。

所以我更推荐：

```text
||res.wx.qq.com/mpres/zh_CN/htmledition/pages/login/loginpage/images/bg_banner.*.png$image,from=mp.weixin.qq.com
```

逻辑就是：

```text
微信公众平台
       │
       │ 请求
       ↓
res.wx.qq.com
       │
       ├── logo.svg                 ← 放行
       ├── xxx.css                  ← 放行
       ├── xxx.js                   ← 放行
       ├── qrcode.gif               ← 放行
       │
       └── bg_banner.*.png
                  ↑
                  │
                BLOCK
```

这样即使腾讯将：

```text
5951b7fdf2d
```

换成新的 Hash，你仍然能够屏蔽 Banner。

uBlock 的静态网络过滤语法支持 URL 模式、资源类型以及来源域限制。([GitHub][5])

---

## 不建议用 `hosts` 文件

你可能会想到 Windows：

```text
C:\Windows\System32\drivers\etc\hosts
```

然后：

```text
0.0.0.0 res.wx.qq.com
```

技术上确实能够阻止它。

但**千万不要这么做**。

因为 `hosts` 只能处理：

```text
hostname
```

不能区分：

```text
res.wx.qq.com/a.png
res.wx.qq.com/a.js
res.wx.qq.com/a.css
```

结果会变成：

```text
res.wx.qq.com
      ↓
全部阻止
      ↓
微信公众平台大量 CSS / JS / 图片一起挂掉
```

你实际上只想阻止：

```text
bg_banner.*.png
```

所以应该使用 URL 级过滤，而不是 DNS / Hosts 级过滤。

---

## `display:none` 也不等价

还有一个很容易混淆的问题。

假设你用 Stylus、Tampermonkey 或 DevTools 加：

```css
.banner {
    background-image: none !important;
}
```

视觉上：

```text
背景消失了
```

但你的真正要求是：

```text
不要加载图片
```

这两个概念不是完全一样的。

如果浏览器在你的覆盖 CSS 生效之前已经解析了原始 CSS：

```css
.banner {
    background-image:
        url(https://res.wx.qq.com/.../bg_banner.5951b7fdf2d.png);
}
```

浏览器完全可能已经开始下载：

```text
CSS Parser
    ↓
发现 url(...)
    ↓
创建 Image Request
    ↓
Network
    ↓
下载 PNG
    ↓
你的 CSS 再覆盖 background-image
```

最终效果：

```text
图片没有显示
```

但：

```text
图片已经下载
```

所以：

```css
background-image: none;
```

解决的是 **Rendering**。

而：

```text
Network Request Blocking
```

解决的是 **Loading**。

你的要求明显属于后者。

---

## 如何确认真的没有加载

设置规则以后，打开：

```text
F12
→ Network
```

然后勾选：

```text
Disable cache
```

点击：

```text
Img
```

再刷新：

```text
Ctrl + R
```

搜索：

```text
bg_banner
```

使用 DevTools Request Blocking 时，你会看到该请求以 blocked 状态出现；Chrome / Edge 的 Network 面板也支持专门过滤查看被阻止的请求。([Chrome for Developers][6])

也就是说理想结果不是：

```text
200
(from disk cache)
```

也不是：

```text
304
```

而应该是：

```text
blocked
```

从网络流程看，最终变成：

```text
mp.weixin.qq.com
       │
       ↓
解析 CSS
       │
       ↓
准备请求 bg_banner.png
       │
       ↓
浏览器过滤器
       │
       ├───────────────┐
       ↓               ↓
    BLOCK            不发送 HTTP 请求
       │
       ↓
页面没有 Banner 图片
```

### 我建议你的最终方案

如果只是现在研究微信页面：

```text
F12
→ Network
→ 找到 bg_banner
→ 右键
→ Block request URL
```

最快。

如果是以后每次打开都不想加载，我会采用这一条：

```text
||res.wx.qq.com/mpres/zh_CN/htmledition/pages/login/loginpage/images/bg_banner.*.png$image,from=mp.weixin.qq.com
```

它比精确写死 `5951b7fdf2d` 更耐用，也只会影响微信公众平台的这个 Banner，不会误伤 `res.wx.qq.com` 上其他微信静态资源。

[1]: https://developer.chrome.com/docs/devtools/network/?utm_source=chatgpt.com "Inspect network activity  |  Chrome DevTools  |  Chrome for Developers"
[2]: https://learn.microsoft.com/en-us/microsoft-edge/devtools/network-request-blocking/network-request-blocking-tool?utm_source=chatgpt.com "Network request blocking tool - Microsoft Edge Developer documentation | Microsoft Learn"
[3]: https://github.com/uBlockOrigin/uBOL-home/wiki/Frequently-asked-questions-%28FAQ%29?utm_source=chatgpt.com "Frequently asked questions (FAQ) · uBlockOrigin/uBOL-home Wiki · GitHub"
[4]: https://github.com/gorhill/ublock/wiki/static-filter-syntax?utm_source=chatgpt.com "Static filter syntax · gorhill/uBlock Wiki · GitHub"
[5]: https://github.com/gorhill/ublock/wiki/Dashboard%3A-My-filters?utm_source=chatgpt.com "Dashboard: My filters · gorhill/uBlock Wiki · GitHub"
[6]: https://developer.chrome.com/docs/devtools/network/reference/?utm_source=chatgpt.com "Network features reference  |  Chrome DevTools  |  Chrome for Developers"


每次打开 https://mp.weixin.qq.com/ 时，都让浏览器根本不要请求这张 bg_banner...png，而不仅仅是把它隐藏掉，

如何屏蔽维微信公众号网页版的背景图片加载？

紫薇堂堂主

前端

开发工具

网络与通信

针对微信公众平台背景图加载问题，推荐使用uBlock Origin添加通配符规则`||res.wx.qq.com/mpres/zh_CN/htmledition/pages/login/loginpage/images/bg_banner.*.png$image,from=mp.weixin.qq.com`，实现网络请求级拦截。该方法比CSS隐藏或hosts屏蔽更精准，可永久阻止该图片加载且不影响其他资源，并兼容未来版本Hash变化。

代码解释

Windows

GitHub

热销域名限时优惠，新客首年免费！


domain

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

针对微信公众平台背景图加载问题，推荐使用uBlock Origin添加通配符规则`||res.wx.qq.com/mpres/zh_CN/htmledition/pages/login/loginpage/images/bg_banner.*.png$image,from=mp.weixin.qq.com`，实现网络请...

如何屏蔽维微信公众号网页版的背景图片加载？-腾讯云开发者社区-腾讯云

如何屏蔽维微信公众号网页版的背景图片加载？

如何屏蔽维微信公众号网页版的背景图片加载？

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐