css 透明背景切换导致文字重影、模糊问题 、背景类名切换导致的文字重影、模糊

背景：官网做顶部导航栏下拉从从透明背景切换成白色背景。 一顿操作，监听滚动事件切换类名，这就不说了

但是发现一个诡异的事情，这个文字似乎有重影，j既不是背景也不是css属性引起的，鼠标移动就会变正常，百思不得解

 

把背景去掉

 

 

 

 

 what f**k  ？？ 为啥会这样，遂打开度娘一顿搜索，大半天无果

 　　

　　后来找到原因大致是 :

　　当在 CSS 中使用透明背景切换或背景类名切换时，可能会导致文字重影和模糊问题。这是由于浏览器对透明度和背景切换的处理方式不同导致的。

　　切换透明背景会导致页面重绘，解决思路：先重绘完，再显示文字，先隐藏再显示

 

 

　2023/8/1  无意打开博客看到了之前的问题，于是搜索了下：

1. 文字重影问题：当使用透明背景切换时，浏览器可能会在背景切换过程中保留原始文本的副本，导致文字重影。这是因为浏览器在处理透明度变化时，可能会将新的背景与旧的背景叠加在一起，而不是完全替换。

解决方法：

• 尝试使用 CSS 动画或过渡效果来平滑地切换背景，以减少文字重影的问题。
• 使用 will-change 属性来告诉浏览器背景将要发生变化，以便优化性能和避免文字重影问题。例如：will-change: background;

2. 文字模糊问题：当切换背景类名时，可能会导致文字模糊，特别是在某些浏览器或设备上。这是因为浏览器在重新渲染元素时，可能会对文字进行子像素抗锯齿处理，导致文字变得模糊。

解决方法：

• 尝试使用 transform: translateZ(0) 或 backface-visibility: hidden 等 CSS 属性来创建一个新的图层，以避免文字模糊问题。
• 使用 will-change 属性来告诉浏览器背景类名将要发生变化，以便优化性能和避免文字模糊问题。例如：will-change: background;

 

　　希望能帮到你~~！！