cssscale方法文字模糊怎么解决

html-css014

cssscale方法文字模糊怎么解决,第1张

1.改变字体大小。增大字号,可以尽可能的让文字接近正常的大小,从而减少模糊的程度。

2.改变屏幕分辨率。把屏幕分辨率调到一个较高的值,可以改善文字的清晰度。

3.通过css3中的text-shadow属性来给文字加上阴影,从而减轻文字模糊的程度。

4.使用hint属性来为cssscale提供hint信息,从而获得更为清晰的输出。

最近在写活动页面遇到一个效果,在黑色透明蒙层后面的元素要有模糊,毛玻璃的效果,最初想到的就是 filter: blur(2px) ,直接在元素上使用,但是整个子元素都被模糊了,而且蒙层的背景并没有效果,经过百般搜索和尝试,发现还有一个属性可以实现专门针对有透明度的元素做模糊的效果,而且还不会影响到子元素的展示,它就是 backdrop-filter: blur(3px) ,完美的实现了设计稿的要求。

下面就来看看这两个属性的区别,遇到的问题以及解决方案。

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。

想要模糊图像或者某个不带透明度的元素,可以直接在元素上加 filter: blur(2px) ,如果这个元素下面有子元素,这样写子元素也会被模糊,解决方法是使用伪元素加定位效果实现:

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。 因为它适用于元素 背后 的所有元素,为了看到效果,必须使元素或其背景至少部分透明。

所以给蒙层的后面添加模糊的效果,可以直接在蒙层元素上使用 backdrop-filter: blur(2px)即可。

这两个属性的使用可以详细的参考 mdn上的描述:

backdrop-filter

filter