前几天，我写了一个用于为维基百科创建深色模式的 Chrome 扩展，玩得很开心。一切顺利，但后来我注意到了一些瑕疵:
Screenshop snippet of artifacts.
对应的html是:
<span class="texhtml">
<i>ω</i>
<span style="position:relative;
margin-right:-0.75em;
right:0.75em;
bottom:0.75em;;">
<small>→</small>
</span>
... 来自网站:https://en.wikipedia.org/wiki/Vorticity
我找不到此跨度或其中任何其他节点的任何背景 css 设置...当我在我的扩展程序中更改背景设置时，没有任何反应。
这是我的扩展程序加载的 css 文件:
:root
{
/* COLOR DEFINITONS */
/* Color palette from hackaday.com */
--background: rgb(30,30,30);
--text: rgb(221,221,221);
--border: rgb(72,72,72);
--links: rgb(23,168,250);
}
/* Remove top banner */
#cnotice-main
{
display: none !important;
}
/* Borders */
*
{
border-color: var(--border) !important;
}
/* Links */
a
{
color: var(--links) !important;
}
/* Invert Wikipedia Logo */
#p-logo
{
filter: invert(100%) !important;
}
/* Change colors where appropriate */
body, #content,
*[class~='navbox'], td, #simpleSearch,
*[class^='suggestions'], *[class^='special-'], input,
#mw-head, table, div[id='catlinks'], div[class^='thumb'],
table[class^='wikitable'], th, span[class='tocnumber'],
*[id^='p-namespaces'], *[id^='p-view'], span, li,
div[class^='mw-'], *[class^='Nav'],
*[id^='mwe-popup'],
*[class^='mwe-popup'],
*[id^='mp-'], div[id='toc'],
h1, h2, h3, h4, h5, h6
{
background-image: none !important;
background-color: var(--background) !important;
background: var(--background) !important;
color: var(--text) !important;
}
/* DOES NOT WORK, i.e. background is still solid grey. */
[class='texhtml']
{
background rgb(0,0,0,0.5) !important;
}
/* Latex formulae */
.mwe-math-fallback-image-inline
{
filter: invert(100%);
}
任何帮助将不胜感激!
最佳答案
您可以使用 CSS 为每个跨度设置背景。
您应该从选择器中排除该标签:而不是将背景应用于每个 <span>标记，你应该尝试:
span:not(.texhtml),
span:not(.texhtml) span
关于html - CSS 过滤器 : Wikipedia: Inline math's background is not transparent，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53159626/