位置:电子教程 > CSS入门到精通 (如果看不到内容请使用360浏览器) 推荐学习资源
CSS入门
CSS 基础样式
CSS 高级样式
语法应用:CSS 对齐
当前阅读教程:CSS入门到精通 > background-attachment 属性
阅读(22555525)      收藏       赞(5685)      分享
上一篇: background-repeat背景图像水平或垂直平铺 下一篇: background-position 背景图像定位

标签定义及使用说明

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

默认值:

scroll

继承:

no

版本:

CSS1

JavaScript 语法:

object   object.style.backgroundAttachment="fixed"

浏览器支持

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

紧跟在 -webkit-, -ms- -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

image.png

注意: Internet Explorer 8和更早版本的浏览器不支持多个背景图像在一个元素

属性值

说明

scroll

背景图片随页面的其余部分滚动。这是默认

fixed

背景图像是固定的

inherit

指定background-attachment的设置应该从父元素继承

示例

小白教程网www.2d5.net

代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>指定一个固定的背景图像</title>

<!--定义内部样式-->

<style>

     /*定义整个页面固定的背景图片*/

     body{

             /*定义页面背景图片,默认是平铺*/

         background-image:url("img/bg.gif");

             /*设定背景图片不重复,也就是只显示1*/

             background-repeat: no-repeat;

             /*设定背景图片固定*/

             background-attachment: fixed;

     }

</style>    

</head>

<body>

     <!--定义多行文本;下来查看背景的效果-->

     <p>01.背景图片是固定的。尝试向下滚动页面。</p>

     <p>02.背景图片是固定的。尝试向下滚动页面。</p>

     <p>03.背景图片是固定的。尝试向下滚动页面。</p>

     <p>04.背景图片是固定的。尝试向下滚动页面。</p>

     <p>05.背景图片是固定的。尝试向下滚动页面。</p>

     <p>06.背景图片是固定的。尝试向下滚动页面。</p>

     <p>07.背景图片是固定的。尝试向下滚动页面。</p>

     <p>08.背景图片是固定的。尝试向下滚动页面。</p>

     <p>09.背景图片是固定的。尝试向下滚动页面。</p>

</body>

</html>

效果图

小白教程网www.2d5.net

image.png


上一篇: background-repeat背景图像水平或垂直平铺 下一篇: background-position 背景图像定位
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ:45157718(微信同号)(备注:毕设)