毛玻璃层: 这里的关键技巧就是background:inherit,直接使用了父元素的背景,和父级的background-attachment:fixed可完成从相机看世界的各种牛逼效果。 本文的的毛玻璃是全景,当然可以上半部或者下半部,或者其他位置,这就看出inherit和fixed牛逼的地方了。 01.frosted-glass{ 02width: 287px; 03height: 285px; 04...
css文件: body{background:url("img/9.jpg")0/coverfixed;}main{position:absolute;top:0;bottom:0;left:0;right:0;width:800px;height:500px;line-height:2;margin:auto;border-radius:5px;background:rgba(255,255,255,.3);box-shadow:3px3px6px3pxrgba(0,0,0,.3);} 输出后的效果: 我们可以看到...
**首先看效果** **引入下题** HTML: CSS3: #blur{ filter:blur(10px); -webkit-filter:blur(10px); -moz-filter:blur(10px); -ms-filter:blur(10px); -o-filter:blur(10px); } **看个复杂点的例子** 查看演示 结合CSS3毛玻璃实现微信版的发红包看完整照片效果。可以完美的兼容移动端与PC端。
首先由于blur出现了外阴影,这个比较好解决,只要加上overflow: hidden;就行了。其次四周20px的模糊半径范围内模糊效果会逐渐消退。如果对此比较介意,想让四周的模糊效果和中间一样,可以将伪元素尺寸外扩20px,为了保险起见,可以稍微再外扩一点到30px: main { … overflow: hidden; } main::before { … margin: ...
css中: .blur { filter: url(blur.svg#blur); -webkit-filter: blur(3px); -moz-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); } 针对css第一行需要引入文件 blur.svg ...
css文件 body,main::before{background:url("img/9.jpg")0/coverfixed;}main{position:absolute;top:0;bottom:0;left:0;right:0;width:800px;height:500px;line-height:2;margin:auto;border-radius:5px;background:rgba(255,255,255,.3);box-shadow:3px3px6px3pxrgba(0,0,0,.3);overflow:hidden;}...