用户脚本，用于替换 Stack Exchange 页面上的图标，垃圾邮件背景图像应该是图标

Question

我正在尝试编写一个用户脚本来解决新 Stack Exchange 设计中突出显示的编辑器图标颜色错误的问题（至少在使用不同原色的网站上，例如 tex.stackexchange，在 https://meta.stackexchange.com/a/317581/237989)

中有更详细的描述

我尝试了以下代码

// ==UserScript==
// @name        StackExchange TEX, adjust css
// @match       *://tex.stackexchange.com/*
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( `

    .wmd-button{
        background-image: url("https://svgshare.com/i/9T3.svg") !important;
    }

` );

但这会导致

Answer 1

注：

该脚本设置了错误的节点样式。页面源 ^{(Link to typical example)} 如下：
```
<li class="wmd-button" id="wmd-code-button" title="Code Sample <pre><code> Ctrl+K">
    <span style="background-position: -80px 0px;"></span>
</li>
```
因此，名义上，您可以设置样式 .wmd-button > span，但是...
你想和其他优秀的 scripts/extensions (Example) 玩得开心，所以使用 .wmd-button[id] > span 来减少副作用。
由于 svgshare.com 已证明停机时间很长，您可能希望将该图像转换为 PNG 格式并将其托管在 i.stack.imgur.com。

所以你的脚本会变成：

// ==UserScript==
// @name        Stack Exchange TEX, fix edit-icon hover colors
// @description Adulterates that beautiful, beautiful orange.
// @match       *://tex.stackexchange.com/*
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( `

    .wmd-button[id] > span {
        background-image: url("https://svgshare.com/i/9T3.svg") !important;
    }

` );

用户脚本，用于替换 Stack Exchange 页面上的图标，垃圾邮件背景图像应该是图标

Userscript, to replace icons on Stack Exchange pages, spams background images where the icons should be

css

userscripts

tampermonkey