站长图库

CSS3背景图片固定滑动效果

 发布时间 2019-11-20 19:43:22 热度  115

 Tag标签:  CSS3背景图片滑动效果
广告
广告
广告
广告
广告

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-y center;
  background-attachment: fixed;
  overflow: hidden;
}



站长图库

站长素材 - 建站资源分享平台

猜你喜欢
Vue多个路由绑定同一组件造成created不执行的解决办法

Vue多个路由绑定同一组件造成created不执行的解决办法

前端开发 84 2019-12-28

Vue多个路由绑定同一组件造成created不执行的解决办法。具体开发中遇到的需求是:多个页面调用同一组件,通...

TAG:园艺wordpress博客模板

使用Jquery提交页面上多个表单数据的方法

使用Jquery提交页面上多个表单数据的方法

前端开发 677 2019-04-21

例如,页面上有4个表单,A,B,C,D。现在利用ajax进行表单的数据提交,现在要把A,B,D三个表单的数据提...

TAG:园艺wordpress博客模板

替换uploadify用Huploadify实现上传图片或文件

替换uploadify用Huploadify实现上传图片或文件

前端开发 80 2019-12-25

之前项目用uploadify(flash version)实现图片上传功能,但是由于chrome浏览器已经屏蔽...

TAG:园艺wordpress博客模板

京东图床上传接口 PHP源码

京东图床上传接口 PHP源码

前端开发 868 2019-04-20

站长在制作网站的时候,前期往往投入都有限,而图片有事比较占用服务器空间的,所以都会选择使用图床,但是哪里的图床...

TAG:园艺wordpress博客模板