老鱼网一个爱分享的小站!分享一些站长相关知识资源文章!
云服务器推荐

首页好文推荐建站教程正文

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

老鱼网1个月前29

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

代码如下:

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

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

具体操作步骤

打开html开发软件,新建一个html代码页面。

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

在html代码页面的标签里面输入多行段落文字,用于后面浏览器滚动条滚动的时候查看图片时候随滚动条而滚动条。如图

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

设置背景图片样式。

在<title>标签后面创建一个<style>标签,然后在这个标签里设置<body>标签的背景图片,以及背景图片不重复。样式代码:body{
background-image: url(img/bg.jpg);
background-repeat:no-repeat;
}

保存html代码后使用浏览器打开,这个时候滚动浏览器滚动条发现背景图片是随浏览器滚动条的滚动而滚动的。

使用background-attachment: fixed设置背景图片不随滚动条而滚动。回到html代码页面,在body样式中添加上background-attachment: fixed即可。

保存html代码页面后刷新浏览器,这个时候滚动浏览器滚动条发现背景图片已经固定不随浏览器滚动而滚动了。如图:

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


上一篇:网站二级、三级联动选择制作方法(附JS Select联动代码 )

下一篇:css @import 语法和写法详解


转载声明:本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。 侵删请致信E-mail:wwwlaoyuwang#126.com(#=@)

云服务器推荐