.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(15px) 这个css属性 blur值 越大 模糊程度也越大 最终我们希望的效果图是这样的 实现方式: 第一步 一个大的 div 里面包裹两个 小的 div1 和 div2 第二步 div1元素加入背景、宽高、过滤(filter)、浮动 第三步 div2元素 开启定位 absolute(一定要脱离普通文档流) 现在基本的效果就实现了,想让页面更美观 剩下的就要自己动手喽 关键点就是 filter属性 :让图片模糊 脱离普通文档流 :内容放到模糊div1 的上面css/box-shadow属性语法及取值https://www.apiref.com/css-zh/properties/backgrounds/box-shadow.htm
none:
无阴影
<length>①:
第 1 个长度值定义元素的阴影水平偏移值。正值,阴影出现在元素右侧;负值,则阴影出现在元素左侧
<length>②:
第 2 个长度值定义元素的阴影垂直偏移值。正值,阴影出现在元素底部;负值,则阴影出现在元素顶部
<length>③:
第 3 个长度值定义元素的阴影模糊值半径(如果提供了)。该值越大阴影边缘越模糊,若该值为0,阴影边缘不出现模糊。不允许负值
<length>④:
第 4 个长度值定义元素的阴影外延值(如果提供了)。正值,阴影将向四面扩展;负值,则阴影向里收缩
<color>:
定义元素阴影的颜色。如果该值未定义,阴影颜色将默认取当前最近的文本颜色
inset:
定义元素的阴影类型为内阴影。该值为空时,则元素的阴影类型为外阴影