您的位置：首页 > Web前端 > css > 正文

CSS中background-attachment

更多时间：2015-5-30 类别：Web前端浏览量：1253

CSS中background-attachment

CSS中background-attachment

CSS中background-attachment属性来指明背景图的位置是固定于视口的，还是随着包含块移动的。可简单理解为定义背景图片随滚动轴的移动方式。

前提是定义了background-image属性

一、background-attachment值

scrool：默认值，背景随页面滚动而移动，即背景和内容绑定，当页面的其余部分滚动时，背景图像不会移动。

fixed： 背景图相对于视口固定，当页面的其余部分滚动时，背景图像不会移动。

local： 背景图相对于元素内容固定。

inhert：规定应该从父元素继承 background-attachment 属性的设置。

(1)、scroll

设置background-attachment:scroll,背景图是相对于元素自身固定，内容动时背景图也动。

对于scroll，一般情况背景随内容滚动，但是有一种情况例外。

对于可以滚动的元素（设置为overflow:scroll的元素）。当background-attachment设置为scroll时，背景图不会随元素内容的滚动而滚动。

(2)、local

对于可以滚动的元素（设置为overflow:scroll的元素）,设置background-attachment:local，则背景会随内容的滚动而滚动。

因为背景图是相对于元素自身内容定位，开始固定，元素出现滚动条后背景图随内容而滚动。

(3)、fixed

背景图片相对于视口固定，就算元素有了滚动条，背景图也不随内容移动。

二、background-attachment 网页背景固定的几种方式

1、右上固定：



<style type="text/css"> 

body{...}{ 
 background-image:url("背景url"); 
 background-position:100% 0%; 
 background-repeat:no-repeat; 
 background-attachment:fixed;} 

</style>

2、右下固定


body {...}{ 
 background-image:url("5.jpg"); 
 background-position:100% 100%; 
 background-repeat:repeat-y; 
 background-repeat:no-repeat; 
 background-attachment:right bottom; 
}

3、左上


body{...}{ 
 background-image:url("背景url"); 
 background-repeat:no-repeat; 
 background-attachment:fixed;
}

4、左下


body{...}{ 
 background-image:url("背景url"); 
 background-position:0% 100%; 
 background-repeat:no-repeat; 
 background-attachment:fixed;
}

5、正中


body{...}{ 
 background-image:url("背景url"); 
 background-repeat:no-repeat; 
 background-attachment:fixed; 
 background-position:center ;
}

6、右边


body{...}{ 
 background-image:url("背景url"); 
 background-position:100% 0%; 
 background-repeat:repeat-y; 
 background-attachment:fixed;
}

7、左边


body{...}{ 
 background-image:url("背景url"); 
 background-repeat:repeat-y; 
 background-attachment:fixed;
}

8、上边


body{...}{ 
 background-image:url("背景url"); 
 background-repeat:repeat-x; 
 background-attachment:fixed;
}

9、下边



body{...}{ 
 background-image:url("背景url"); 
 background-position:bottom; 
 background-repeat:repeat-x; 
 background-attachment:fixed;
}

标签：CSS

上一篇：js隐藏显示tr

下一篇：web前端测试工具

您可能感兴趣

CSS中background-attachment

CSS中background-attachment

热门推荐

排行榜