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