CSS中如何让照片实现翻转和模糊?

html-css016

CSS中如何让照片实现翻转和模糊?,第1张

filter:FlipH()水平翻转对象内容!

filter:FlipV()垂直翻转对象内容。

filter:blur()模糊效果!

代码加在HTML容器Css属性设置里!

所加载的容器要有有效的高和宽!!

filter只有IE浏览器支持的!

如果不会设置HTML的CSS,那就麻烦了!

其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性。

1. 对元素直接使用模糊会将其内容全部模糊掉,为了保证文字不会模糊掉需要多一个层单独应用模糊效果。

2. 模糊效果并不会应用到其背后的元素上,所以需要使用 content 区域有和背景相同的背景图并进行模糊。