background-attachment属性怎么用


本文摘自PHP中文网,作者青灯夜游,侵删。

background-attachment属性需要和background-image属性一起使用,用来设置背景图像是否固定或者随着页面的其余部分滚动。

CSS background-attachment属性

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

基本语法:

1

background-attachment:scroll | fixed | loca;

参数:

scroll:默认值,背景图像会随着页面其余部分的滚动而移动。

fixed:当页面的其余部分滚动时,背景图像不会移动。

loca:背景图像相对于元素的内容固定;当元素的内容滚动时,背景图像总是要跟着内容一起移动。

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

CSS background-attachment属性的使用示例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

body

{

background-image:url('http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/000/024/5c6a4428ea867709.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>

</body>

 

</html>

效果图:

1.gif

本文参考:https://www.html.cn/book/css/properties/background/background-attachment.htm

以上就是background-attachment属性怎么用的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

html css js 区别是什么

css属性前缀的作用是什么?

css如何设置鼠标的形状

css怎么设置背景图大小

css的+(加号)选择器怎么用

css怎么隐藏input

css怎么去掉边框

css如何设置图片不重复

a标签怎么去掉下划线

css怎么设置字体居中?

更多相关阅读请进入《background-attachment属性》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...