css 毛玻璃_CSS3:毛玻璃效果

通常我们喜欢使用半透明颜色作为背景。如果将其叠放到照片背层上,就会增加视觉上的冲击力,不过这样会导致文字阅读困难。

比如,下面这个效果:

html文件:

"少年贪玩,青年迷恋爱情,壮年汲汲于成名成家,暮年自安于自欺欺人。人寿几何,顽铁能炼成的精金,能有多少?但不同程度的锻炼,必有不同程度的成绩;不同程度的纵欲放肆,必积下不同程度的顽劣。
"上苍不会让所有幸福集中到某个人身上,得到爱情未必拥有金钱;拥有金钱未必得到快乐;得到快乐未必拥有健康;拥有健康未必一切都会如愿以偿。保持知足常乐的心态才是淬炼心智、净化心灵的最佳途径。一切快乐的享受都属于精神,这种快乐把忍受变为享受,是精神对于物质的胜利,这便是人生哲学。" —— 杨绛

css文件:

body{ background: url("imgs/animals.jpg") 0 / cover fixed;}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: 3px 3px 6px 3px rgba(0, 0, 0, .3);}

输出的效果:

001ea0e353a208580a8c06a425c031b8.png

透明背景效果

我们可以看到文字的阅读显然变得很困难,如果想要改善,可以提高背景色的不透明度,如下:

9ba1bfab57c572f7fae7b62ae170acb0.png

不透明度改为70%

文字的阅读性提高了,但是失去了想要达到的设计美感。如果我们想要二者兼得,可以借助滤镜达到这样的效果。

由于我们不能直接对元素本身进行模糊处理,所以就先给该元素添加一个伪元素,然后将其定位在元素的下层,它的背景将无缝匹配到元素的背景。

完整代码如下:

body, main::before{ background: url("imgs/animals.jpg") 0 / cover fixed;}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: 3px 3px 6px 3px rgba(0, 0, 0, .3); overflow: hidden;}main::before{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; filter: blur(20px); z-index: -1; margin: -30px;}

效果如下:

9c44e92ba182734afdd262dc3169ff88.png

毛玻璃效果

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值