如何通过浏览器扩展移除网页元素CSS背景色适配OBS采集

你写的CSS不生效是三个典型问题：

• 选择器写法错误：第一条规则main-content wf100会匹配<main-content>标签嵌套的<wf100>子标签，这俩都不是标准HTML标签，根本命中不了页面元素；后面两条类/ID选择器也没精准定位到真正设置背景的节点。
• 样式权重不足：自定义注入的CSS如果不做权重提升，很容易被原站点的内置样式覆盖，写了等于没写。
• 覆盖属性不全：你只设置了background或background-color，如果站点用背景图、CSS渐变做背景，仅改颜色属性不会生效；另外绝大多数站点的全局背景是直接挂载在<html>、<body>根节点上的，你只改子容器当然看不到透明效果。

解决方法 #

你可以选两种方式注入样式：要么用Stylus这类自定义CSS浏览器扩展注入到目标站点，要么直接把CSS写到OBS的浏览器源配置里，后者更省事，不用改本地浏览器设置。

1. 先定位真实背景节点（可选，要是直接用下面给的通用代码能生效可以跳过这步）
   打开目标页面按F12调出开发者工具，点左上角的元素拾取箭头，点选你要透明的页面区域，在右侧样式面板向上翻，找到实际生效background相关属性的选择器，不要靠猜类名写规则。
2. 直接用下面的覆盖样式，兼容绝大多数同类场景：

/* 清除根节点全局背景 */
html, body {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* 清除目标容器及所有嵌套子元素的背景 */
#main-content, .main-content, .wf100,
#main-content *, .main-content *, .wf100 * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

代码说明：

• 加!important是为了拉满样式权重，避免被原站样式覆盖
• 加*通配符是选中容器下所有子元素，防止子元素单独挂了背景漏改
• 同步清除background-image，兼容渐变、图片类背景，不会出现颜色透明了但背景图还留着的问题

3. OBS采集注意点
   要是用OBS浏览器源采集，直接把上面的CSS粘贴到源设置的「自定义CSS」输入框就行，不用在本地浏览器装扩展改样式；如果用窗口捕获整个浏览器页面，记得把浏览器自带的主题背景、新标签页默认背景关掉，避免露出浏览器本身的UI底色。

内容的提问来源于stack exchange，提问作者XenLeaks