background-attachment 网页背景固定

最新推荐文章于 2025-08-18 20:17:18 发布

u010227447

最新推荐文章于 2025-08-18 20:17:18 发布

阅读量663

点赞数

CC 4.0 BY-SA版权

文章标签： js javascript jquery

本文链接：https://blog.youkuaiyun.com/u010227447/article/details/46883191

本文详细介绍了网页背景样式的设置方法，包括固定、右上、右下、左上、左下、正中、右边、左边、上边和下边等位置的背景图片应用，以及背景图片的重复方式和附件方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

右上固定：

1
<style
 type="text/css">

2
<!--

3
body{

4
background-image:url("背景url");

5
background-position:100% 0%;

6
background-repeat:no-repeat;

7
background-attachment:fixed;}

8
-->

9
</style>

------------------------

右下固定：

01
<!--

02
body
 {

03
 
04
background-image:url("5.jpg");

05
background-position:100%
 100%;

06
background-repeat:repeat-y;

07
background-repeat:no-repeat;

08
background-attachment:right
 bottom;

09
}

10
-->

------------------------

左上

1
<style
 type="text/css">

2
<!--

3
body{

4
background-image:url("背景url");

5
background-repeat:no-repeat;

6
background-attachment:fixed;}

7
-->

8
</style>

------------------------

左下

1
<style
 type="text/css">

2
<!--

3
body{

4
background-image:url("背景url");

5
background-position:0% 100%;

6
background-repeat:no-repeat;

7
background-attachment:fixed;}

8
-->

9
</style>

-------------------------

正中

1
<style
 type="text/css">

2
<!--

3
body{

4
background-image:url("背景url");

5
background-repeat:no-repeat;

6
background-attachment:fixed;

7
background-position:center ;}

8
-->

9
</style>

-----------------------

右边

1
<style
 type="text/css">

2
<!--

3
body{

4
background-image:url("背景url");

5
background-position:100% 0%;

6
background-repeat:repeat-y;

7
background-attachment:fixed;}

8
-->

9
</style>

------------------

左边

1
<style
 type="text/css">

2
<!--

3
body{

4
background-image:url("背景url");

5
background-repeat:repeat-y;

6
background-attachment:fixed;}

7
-->

8
</style>

--------------

上边

1
<style
 type="text/css">

2
<!--

3
body{

4
background-image:url("背景url");

5
background-repeat:repeat-x;

6
background-attachment:fixed;}

7
-->

8
</style>

-----------------------

下边

1
<style
 type="text/css">

2
<!--

3
body{

4
background-image:url("背景url");

5
background-position:bottom;

6
background-repeat:repeat-x;

7
background-attachment:fixed;}

8
-->

9
</style>