如何使网页的背景图片不随着滚动条移动 使背景图片固定?(要代码)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使网页的背景图片不随着滚动条移动 使背景图片固定?(要代码)相关的知识,希望对你有一定的参考价值。

提示:
fixed表示指定的背景是永远固定的,即:背景图片不随着网页的滚动而滚动。通过此元素设置出的网页效果在当今受到很多网络高手垂青。scroll这元素的作用正好与fixed相反,此元素与html中的背景元素所产生的效果基本相同,就是说可以直接html中添加,不错吧~

代码:

<style>
body background-position: center;//背景居中
background-repeat: no-repeat;//无重复
background-attachment: fixed;//固定不动
</style>

------------------------------
下面的是在html中直接添加的:
<body style="background-attachment:fixed";background="背景图片路径“>
</body>
参考技术A background-attachment
属性设置背景图像是否固定或者随着页面的其余部分滚动。
scroll
默认值。背景图像会随着页面其余部分的滚动而移动。
fixed
当页面的其余部分滚动时,背景图像不会移动。
inherit
规定应该从父元素继承
background-attachment
属性的设置。
所以如果要背景图不随滚动条滚动就要用:background-attachment:fixed
参考技术B

body

background:url(/imgs/bj1.jpg);//背景路径

background-size:100%;//填充

background-repeat:no-repeat;//无重复

background-attachment: fixed;//固定

参考技术C 插框架,然后加背景!!! 参考技术D dreamweaver里面页面属性 背景图片

代码好像是 <bgimage src=''>

不晓得对不对。。。我现在手头没有dw

如何让DIV固定在页面而不随着滚动条随意滚动

参考技术A 可以用position的fixed属性,这个属性的功能就是使元素的定位方式为固定的,这样就可以让div不随滚动条滚动而改变位置。
下面举个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页</title>
<style>
#cen

position: fixed;
left: 10px;
top:100px;
width: 100px;
height: 100px;
background-color: aqua;

</style>
</head>
<body>
<div id="cen"></div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

以上是关于如何使网页的背景图片不随着滚动条移动 使背景图片固定?(要代码)的主要内容,如果未能解决你的问题,请参考以下文章

你好,移动端怎么使页面不出现滚动条,怎么自适应呢,求指教

网页设计如何设置网页部分内容不随着滚动条而移动移动?

DW制作网页,下面代码如何修改才能使鼠标放在滚动图片上时就停止滚动?

css如何不改变原位置的使多个图片在原地动画

交互优化--如何使移动端滚动更加流畅

为啥不先移动鼠标就无法滚动视差?