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属性怎么用的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css里的图片无法显示怎么办

css如何实现波浪效果

详解css z-index的权重问题

css图片可以旋转吗

css 绝对定位是什么

分享一些提高前端开发效率的css 属性选择器!!

css怎么设置文字间距

css样式“list-style:none”是什么意思?

css如何添加阴影边框(代码实例)

什么是css,其主要作用是什么

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




打赏

取消

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

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

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

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

评论

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