首页 > 代码库 > 用CSS3实现背景的固定

用CSS3实现背景的固定

今天放假了,正好最近养成了没事泡泡博客园的习惯,自己也有了博客。。不得不吐槽一下博客园为什么页面这么古朴,,带的几个模版也没啥意思,反正不符合我口味,幸亏后台提供了编辑CSS的功能,于是我就搬来现有的模板自己改了改CSS,当加背景时遇到了一点问题,背景内容一多拉滚动条背景也跟着跑,并且背景也没有拉伸到整个页面,几经摸索,终于找到了解决办法,用CSS3的background-size、background-attrachment、background-repeat即可实现

1 body{2 background:url("指定你的背景路径");3 background-size:cover;//填充背景至父容器4 background-attachment:fixed;//防止跟着滚动条跑5 background-repeat:no-repeat;//防止重复6 }

 

注意:这条CSS需要CSS3支持(。。现在360这么狂轰滥炸恐怕也没几个人不用360浏览器了,360浏览器默认的是Chrome内核所以没问题)

效果就像我的博客现在的背景

用CSS3实现背景的固定