学做网站培训课程介绍

当前位置:

CSS3背景图固定:设置背景图片不随拖动条滚动

网页设置背景图片不随我们拖动光标而移动,一直固定在这里。怎么实现这们的效果呢?其实很简单,只需要在CSS里给背景图片设置一下样式即可。

代码如下:


.bg{
background-image: url(bg.jpg);
    background-repeat: repeat-y;
    background-position: top center;
    background-attachment: fixed;
}

代码中的background-attachment: fixed;就可以实现背景图片不随拖动条滚动的效果。

具体操作步骤

  1. 打开html开发软件Dreamweaver软件,新建一个html代码页面。CSS3设置背景图片不随拖动条滚动(背景图固定)
  2. html代码页面的标签里面输入多行段落文字,用于后面浏览器滚动条滚动的时候查看图片时候随滚动条而滚动条。如图CSS3设置背景图片不随拖动条滚动(背景图固定)
  3. 设置背景图片样式。在<title>标签后面创建一个<style>标签,然后在这个标签里设置<body>标签的背景图片,以及背景图片不重复。样式代码:
    
    
    body{
    background-image: url(img/bg.jpg);
    background-repeat:no-repeat;
    }
  4. 保存html代码后使用浏览器打开,这个时候滚动浏览器滚动条发现背景图片是随浏览器滚动条的滚动而滚动的。
  5. 使用background-attachment: fixed设置CSS3 background背景属性背景图片不随滚动条而滚动。回到html代码页面,在body样式中添加上background-attachment: fixed即可。
  6. 保存html代码页面后刷新浏览器,这个时候滚动浏览器滚动条发现背景图片已经固定不随浏览器滚动而滚动了。如图:
    CSS3设置背景图片不随拖动条滚动(背景图固定)

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 通过CSS样式可以控制网页中各个元素的显示方式,通过CSS样式可以在网页中画出一个三角形,圆形等形状。(了解更多CSS知识,请学习CSS视频教程)CSS
  • 什么是自适应网页随着网站浏览设备屏幕大小不同(包括PC,IPAD,手机等浏览设备),为了适应不同的屏幕,做网站制作时可以自动根据浏览网站的屏幕尺
  • 网页如何添加背景音乐 视频教程附件下载 (1116827 次浏览)
    在上网过程中,有很多网站打开后会自动播放背景音乐,而且只有当关闭网页之后背景音乐才会停止。在我们自己建网站,同样也可以给自己的网页添加背
  • 如何给网页添加背景图片 视频教程 (1117336 次浏览)
    使用DW软件给网页添加背景图片的步骤: 启动Dreamweaver程序,新建一个新的HTML文档,将文档保存到电脑的适当位置。 单击属性栏中的“属性
  • DZ论坛程序上传之后,默认的是蓝底白字,不是很美观。怎么去更换自己需要的背景颜色和背景图片呢,有二种更换的方法,第一种是通过FTP软件找到相应的C
  • 我们在自己建网站时,由于网站版面幅度的限制,我们之前讲制作大型门户网站鼠标移动tab切换栏目,今天我们讲另一种突破网页限制的特效- div滚动到指定
  • 在我们实际自己做网站时,往往为了方便用户点击导航栏里的栏目,需要将自己网站的导航栏一直固定在顶部。即使用户将网页往下拉时,也一直在浏览器的顶
  • 通过网页制作教程上节课怎样在网页中添加表格,我们就可以在网页中插入一个表格,但往往插入的表格并不美观,我们需要设置一些表格参数去达到我们要求
  • 我们知道,网站伪静态可以形成静态页面,对于百度收录有着最大的好处。(相关知识:Discuz论坛后台SEO优化设置详细步骤)对于DISCUZ论坛程序实
  • 在做网站过程中,如果想在一张网页上实现图片加文字的格式,就需要通过Dreamweaver CS6破解版软件设置背景图片。可以在网页上添加背景图片,然后
  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • 网页设置背景图片不随我们拖动光标而移动,一直固定在这里。怎么实现这们的效果呢?其实很简单,只需要在CSS里给背景图片设置一下样式即可。代码
  • 很多企业网站的首页都会做一种动态滚动展示企业产品的效果,是企业网站建设常用的方法。既展示了企业的产品,又让整个网站动静结合,不再毫无生气。
  • 我们在学习网站制作过程,发现很多网站都采用tab切换菜单来显示不同栏目的内容,这样即可以节省网站版面,也可以更多的显示网站的栏目内容。如何在自