怎样解决CSS Sprite在高分屏上显示模糊的问题

html-css028

怎样解决CSS Sprite在高分屏上显示模糊的问题,第1张

好像还没有什么好的解决办法。系统的字体放大后是正常的,但是大多数软件都没有很好的支持放大。 所以除了系统字体外,都很模糊。解决模糊的现行办法:

1.将就的用100%,不放大

2.设置为 低分辨率,虽然各方面都显示的很清楚,但显示效果又降分了,没有很好的发挥高分屏的特点

css中在blur模糊的基础上让边缘变清晰方法:

.blur {

-webkit-filter: blur(5px)

-moz-filter: blur(5px)

-o-filter: blur(5px)

-ms-filter: blur(5px)

filter: url(#blur-effect-1)

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='5')

zoom: 1

}

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

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

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

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

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

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

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

backdrop-filter

filter