css 分享之background-attachment 属性

微分享才发现的css背景图达到的效果代码属性：

background-attachment -- 定义背景图片随滚动轴的移动方式:

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

 

css

div
{
    background-image:url('img.jpg');
    background-attachment:fixed;
    background-repeat:repeat-x;
    background-position:center center;
}

 

html

<p>内容</p>
<div style="background-image:url(img.jpg);background-attachment:fixed;width:1400px;height:500px;">内容</div><!--背景-->
<img src="Water lilies.jpg " width="1400" height="300"/>

 

 浏览效果：中间红色区域可伸展或动态效果图等

 

 

 注：所有浏览器都支持 background-attachment 属性。