通常我们喜欢使用半透明颜色作为背景。如果将其叠放到照片背层上,就会增加视觉上的冲击力,不过这样会导致文字阅读困难。
比如,下面这个效果:
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](https://i-blog.csdnimg.cn/blog_migrate/da15e976b7e17edac7457a8122b78908.jpeg)
透明背景效果
我们可以看到文字的阅读显然变得很困难,如果想要改善,可以提高背景色的不透明度,如下:
![9ba1bfab57c572f7fae7b62ae170acb0.png](https://i-blog.csdnimg.cn/blog_migrate/fa0cd9c3392ebb01f74f1d8b92391156.jpeg)
不透明度改为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](https://i-blog.csdnimg.cn/blog_migrate/b1495dc1077728afd94f6e7187f484d2.jpeg)
毛玻璃效果