CSS实现背景图片固定

时间:2022-09-17 10:31:09

很多网站的背景都是通过背景图片的repeat实现的,这样并不是不好,只是说,有时候,要找到一张repeat起来也很好看的图片简直是可遇不可求啊!但是如果不repeat的话,背景图片会随着页面滚动而滚动,效果真心不是很好看。所以,当选中一张perfect的背景图片时,设置固定就好啦!在CSS里,是通过 background-attachment: fixed 实现的。

当然,这样有个缺点就是,背景图片的大小要求铺满整个屏幕,这就要点PS基础了...额,还有个问题,就是不同设备的分辨率和屏幕大小都不一样,background-attachment: fixed 这样设计的话在不同设备下会不会造成不美观的效果呢?暂时没实践...希望实践过得人儿能分享一下你们的经验吧!

实现代码:

<style type="text/css"> 

body { 
background-image:url('bg.jpg'); 
background-repeat: no-repeat; 
background-attachment: fixed; //这个属性必须与 background-image 一起使用

</style>