css 使背景图在页面最下方，并且不会跟着页面滚动

最新推荐文章于 2024-04-27 21:35:02 发布
最新推荐文章于 2024-04-27 21:35:02 发布
阅读量3.5k 收藏 1
点赞数 1
分类专栏： 背景图 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55648290/article/details/122959851
版权

background: url("/images/index/article_detail_bot_bg.png") no-repeat;

background-position: bottom center; //属性设置背景图像的起始位置。

background-attachment: fixed; //属性设置背景图像是否固定或者随着页面的其余部分滚动,fixed是  当页面的其余部分滚动时，背景图像不会移动。

尤小白
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3鼠标滚动控制页面滚动特效
07-24
CSS3鼠标滚动控制页面滚动特效是一款基于CSS3属性制作的鼠标滚动控制页面单屏滚动效果。
css3背景图片页面滚动视差效果
11-24
css3背景图片页面滚动视差效果
div+css的图片滚动效果
热门推荐
OoO__0o0的博客
08-15 1万+
想必大家都注意到的不循环滚动，所以出现了很多替代脚本，或iframe或JS输出，不管怎么做，都略显麻烦。下面说一下这个相对简单的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直
html+css实现滚动背景图固定
JackieDYH的博客
05-24 1631
实现页面滚动，背景图穿过的效果 注意：内部图片地址，自己替换成自己的图片 示例代码 css样式代码 * { margin: 0; padding: 0; } body, html { height: 100%; } body { font-size: 100%; font-family: Roboto, sans-serif; color: #4d4d4d; background-color: #fff; } .cd-main-c.
css 使图片紧贴底部显示
fyinthesky的专栏
05-21 5642
css 使图片紧贴底部显示 img{ display: table-cell; vertical-align: bottom; }
.如何将页脚固定在页面底部
weixin_34066347的博客
03-08 384
为什么80%的码农都做不了架构师？>>> ...
html图片定位代码怎么写,如何在css中设置插入图片定位
weixin_36238982的博客
06-09 2096
在做网页开发时，客户给的素材图片通常都是连在一起的，这样做也是为了缩短响应时间。下面就给大家具体说一下 ，如何通过css属性来定位图片。如何在css中设置插入图片定位首先设置固定图片的css属性是background-attachmentbackground-attachment它有两个属性值fixed/scroll● background-attachment：fixed;表示固定图片，图片不随...
css背景图片置于底部~~~在底部添加背景图
qq_43983650的博客
11-25 1万+
background-image: url(http://dodui.oss-cn-shenzhen.aliyuncs.com/20201119homefishing/ztmd.png); background-repeat: no-repeat; background-size: 100% auto; background-position: 0 100%; 这样就可以很好的将一个图片置于底部。
HTML+CSS - 背景图片固定在页面下
小多的博客
11-26 1479
<!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title&g
div中如何把图片始终悬浮（固定）在页面窗口底部或顶部
qq_41353397的博客
11-07 4661
页面底部： css代码： .divClass { position: fixed; bottom: 0; left: 0; right: 0; height: 20px; background-color: #FFC0CB; } 页面顶部 css代码： .divClass { position: fixed; top: 0; left: 0; right: 0; height: 20px; background-color: cornflowerblue; } ...
jquery+css3导航二级图片页面上下滚动
06-05
今天给大家推荐一个很不错的二级
js+css3页面滚动图片倾斜动画特效代码
03-20
js+css3页面滚动图片倾斜动画是一款利用.container元素集合所有图片，进行自定义滚动行为，每个div对应设置背景图片，通过鼠标滚动页面图片元素动画效果。
css样式实现整个页面背景使用一张图片
09-25
最近一直被css背景困扰，因为是仿站，别人网站背景图片无论怎样另存，都是相同文件名，打开一看，整个网站的各个角落背景图片都在一个文件中分布，于是上网搜集资料，发现使用这种方法的网站很多，源自于雅虎最早。
css利用transform:skew()属性画一个大屏的背景斜面四边形特效
最新发布
Demon's blog
04-27 226
使用css transform function中的skew()方法实现画其中一个斜面，然后调整背景色实现ß。在工作工程中需要写一个如下的大屏背景，是由几个斜面做成的效果。2. 添加transform属性。4. 重复三个，注意背景色不一样。3. 添加渐变背景色和阴影。
【React】CSS 局部样式
小秀的博客
04-26 376
的时候，如果 CSS 文件名包含 module，那么说明该 CSS 是一个局部 CSS 样式文件，类似于 vue 中的 scoped。
vuetify3.0+tailwindcss+vite最新框架
qq_43813351的博客
04-23 402
【代码】vuetify3.0+tailwindcss+vite最新框架。
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1169
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
js动态设置css主题(Style-setProperty)
zarek_jiamu的博客
04-27 290
定义的参考色，在开发的过程中希望后端人员能遵循// 用于按钮点击颜色num
2分钟自己写小游戏：使用js和css编写石头剪刀布小游戏、扫雷小游戏、五子棋小游戏。新手老手毕业论文都能用。
m0_68335484的博客
04-23 1451
2分钟自己写小游戏：使用js和css，快捷编写剪刀石头布游戏源代码、扫雷源代码、五子棋。新手老手毕业论文都能用。使用的都是简单的js和css代码，实现了这三款小游戏，复制就能用。一看就能懂。这里分享一下。下次继续。
html+css使图片在页面中循环滚动
06-12
要在页面中循环滚动图片，可以使用CSS3的动画属性和关键帧来实现。 首先，在HTML中添加一个包含所有要滚动的图片的容器元素，例如： ```html <div class="image-container"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> </div> ``` 然后，在CSS中设置容器元素的宽度和高度，并将其中的图片设置为绝对定位。这样，每个图片都会覆盖在容器元素的顶部，但只有第一张图片会显示出来。 ```css .image-container { width: 500px; height: 300px; position: relative; overflow: hidden; } .image-container img { position: absolute; top: 0; left: 0; } ``` 接下来，使用CSS3的@keyframes规则定义一个动画，使图片向左移动。在这个规则中，需要设置在哪些时间点上图片应该出现在屏幕上，并且需要为每个时间点指定一个新的left值。 ```css @keyframes scroll { 0% { left: 0; } 100% { left: -1500px; } } ``` 最后，将动画应用到容器元素上，并设置动画的持续时间、循环次数和动画的运动方式。 ```css .image-container { animation: scroll 10s linear infinite; } ``` 这样就完成了图片的循环滚动效果。完整的HTML和CSS代码如下： ```html <div class="image-container"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> </div> ``` ```css .image-container { width: 500px; height: 300px; position: relative; overflow: hidden; animation: scroll 10s linear infinite; } .image-container img { position: absolute; top: 0; left: 0; } @keyframes scroll { 0% { left: 0; } 100% { left: -1500px; } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值