如何用css设置网页背景固定不动

2025-11-05 04:49:00

1、首先我们打开系统记事本程序,输入网页基本代码

<html>

 <body>

 </body>

</html>

如何用css设置网页背景固定不动

2、然后输入head标签和css样式标签代码

 <head>

  <style type="text/css">

  </style>

</head>

如何用css设置网页背景固定不动

3、点击style标签之间,输入定义网页背景图片的代码

body

  background-image:url('d:/bg.gif');

}

如何用css设置网页背景固定不动

4、然后在正文body标签下输入一些主体标签和内容

<body>

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

</body>

如何用css设置网页背景固定不动

5、点击文件,另存为命令,将内容保存为html格式后,打开网页预览下。

如何用css设置网页背景固定不动

如何用css设置网页背景固定不动

6、大家发现现在这种状态,我们滚动鼠标滚轮时候,网页内容和背景图片是同时滚动的,为便于查看,我们修改下代码,让图片不重复显示。

<style type="text/css">

body 

{

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

background-repeat:no-repeat;

}

</style>

然后再预览效果。

如何用css设置网页背景固定不动

如何用css设置网页背景固定不动

7、这样可以很明显的看出来背景图片的变化,为了固定背景图片,我们修改代码为

<style type="text/css">

body 

{

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

background-repeat:no-repeat;

background-attachment:fixed

}

</style>

再来看下效果。

如何用css设置网页背景固定不动

如何用css设置网页背景固定不动

如何用css设置网页背景固定不动

8、代码设置成功。

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢