菜鸡源码,专注精品下载!
当前位置:首页 > 建站教程 > 建站知识

CSS3实现固定背景图片滑动效果

发布时间:2024-01-05  栏目:建站知识   浏览:   分类:css教程 CSS3动画 CSS3教程 CSS选择器

CSS3背景图片固定滑动效果可以通过使用`background-attachment: fixed;`属性实现。这个属性可以让背景图片相对于视口固定,即使页面滚动,背景图片也不会移动。要实现滑动效果,可以使用`background-position`属性来控制背景图片的位置。例如,可以设置`background-position: 50% 50%;`让背景图片始终位于视口的中心。此外,还可以使用`animation`属性和`@keyframes`规则来创建动画效果,使背景图片在滚动时产生平滑的过渡效果。

CSS3背景图片固定住,滚动条滚动浮动在固定位置,这种效果网上看到很多。有一种视觉差的酷炫效果,一般大气的企业网站会非常常见,这种CSS效果运用的好会让网站非常大气上档次。

今天菜鸡源码分享给大家,其实非常简单。

background-attachment:fixed;

CSS3的属性,background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。默认值:scroll 继承性:no 。

有三个常用属性选择,

scroll 默认值。背景图像会随着页面其余部分的滚动而移动。

fixed 当页面的其余部分滚动时,背景图像不会移动。

inherit 规定应该从父元素继承 background-attachment 属性的设置。

完整代码案列

.yjs_main_3{width:100%;height:850px;float:left;background:url(../img/yjs_main_3_bg.jpg)repeat-ycenter;background-attachment:fixed;overflow:hidden;}
相关专题

相关文章

    无相关信息
评论
建站知识
建站知识
使用技巧
调试安装
运营推广