【CSS】CSS 背景设置 ⑥ ( 背景附着

【CSS】CSS 背景设置 ⑥ ( 背景附着 | background-attachment )

本文主要是介绍【CSS】CSS 背景设置 ⑥ ( 背景附着 | background-attachment )，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

一、背景附着
- 1、语法说明
- 2、背景固定效果展示
- - 代码示例
  - 效果展示
- 3、背景滚动效果展示
- - 代码示例
  - 效果展示

一、背景附着

1、语法说明

背景附着用于设置背景图片是可滚动的还是固定的 ;

使用背景附着的前提也是必须提前设置背景图片 , 背景图片设置语法如下 :

background-image: url(images/xxx.jpg);

背景附着语法如下 :

background-attachment : scroll | fixed

background-attachment 属性值设置 : scroll 或 fixed 二选一 ;

scroll : 背景图像与网页内容绑定 , 网页滚动时 , 背景图像也进行滚动 ;
fixed : 背景图像固定 , 滚动网页时 , 背景图像位置保持不变 ;

2、背景固定效果展示

代码示例

<!DOCTYPE html> 
<html lang="en">
<head>    <meta charset="UTF-8" /> <title>背景附着</title><base target="_blank"/><style>body {/* 设置一个足够高的高度, 让页面滚动起来 */height: 2000px;/* 设置背景图片 */background-image: url(images/bg.jpg);/* 设置图片背景平铺模式 */background-repeat: no-repeat;/* 超大背景图片定位 */background-position: center top;/* 背景固定 */background-attachment: fixed;}p {font-size: 50px;color: black;}</style>
</head>
<body>
<body><p>背景附着测试</p><p>背景附着测试</p><p>背景附着测试</p>
</body>
</html>

效果展示

默认打开的样式如下 :
在这里插入图片描述

滚动后 , 背景位置不变 , 只是内容被滚动上去了 ;

在这里插入图片描述

3、背景滚动效果展示

代码示例

<!DOCTYPE html> 
<html lang="en">
<head>    <meta charset="UTF-8" /> <title>背景附着</title><base target="_blank"/><style>body {/* 设置一个足够高的高度, 让页面滚动起来 */height: 2000px;/* 设置背景图片 */background-image: url(images/bg.jpg);/* 设置图片背景平铺模式 */background-repeat: no-repeat;/* 超大背景图片定位 */background-position: center top;/* 背景固定 *//*background-attachment: fixed;*//* 背景滚动 */background-attachment: scroll;}p {font-size: 50px;color: black;}</style>
</head>
<body>
<body><p>背景附着测试</p><p>背景附着测试</p><p>背景附着测试</p>
</body>
</html>