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