Web速查-索引

Background-attachment

定义

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

语法

background-attachment:scroll || fixed || inherit || local;

属性值

说明
scroll 背景图片随页面的其余部分滚动。这是默认
fixed 背景图像是固定的
inherit 指定background-attachment的设置应该从父元素继承
local 背景图片随滚动元素滚动

实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NTHOME-零基础入门学习Web(HTML5+CSS3)</title>
<style>
body
{
background-image:url('1.png');
/*防止平铺,只加载一张背景图*/
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
<p>背景图片固定,滚动页面</p>
</body>
</html>

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

背景图片固定,滚动页面

background-attachment属性设置为fixed ,背景图片会被固定在页面中。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号

Safari Chrome FireFox IE
1.0 1.0 1.0 4.0