VELAS电波站 5418 kHz

今天做了几件奇奇怪怪的事,其实不过是上课的时候开的脑洞而已——想把首页的背景固定,然后把filter: blur引到首页文本背景做个毛玻璃效果,这样就能有ios 7那种动态高斯模糊的效果了……想想都有点美 自恋

然而……并没有做出来

发现filter: blur原理是将整个div,包括里面的文字内容都给模糊了,而且并不能控制只是模糊背景图片,只能在背景的上面加一个div块,将背景继承给他再进行模糊……更不能忍的就是……模糊了之后还将边缘也一起模糊了

大概效果是这样:

filter:blur失败
filter:blur失败

EXCUSE ME????

算了,既然弄不了毛玻璃的话弄个透明也好,毕竟背景固定了之后文本背景加透明也挺萌的(好吧自我安慰)。

当我以为“今天的工作也大概到这里了吧”,准备开开心心玩儿去的时候,我无意中用手机打开……画风是这样的……

移动端不适配
移动端不适配

嗯?

查了一下才知道移动端对background-attachment支持并不好,在size那里调了半天发现怎么都不太对。好咯,视觉效果优先,那只能移除咯……但是又舍不得pc那个视觉冲击力……然后狠下心,去研究了一下怎么用JS来针对移动端选择CSS。最后通过另外写一套mobile的CSS(顺便调了一下排版),再通过JS判断替换CSS文件,终于解决了……

适配成功
适配成功

还是很大快人心的……

但是如果以后要专门针对移动端适配的话……那不是每个页面都要写两套CSS?话说木有iPad的话那怎么做iPad上的测试?汗

另:明天开始动工收起按钮和留言板

好像图片库好久没理了吧

文章链接:https://www.velas.xyz/am/5418

标签:前端心得, 学习笔记, 移动端适配