欢迎光临 - 我的站长站,本站所有资源仅供学习与参考,禁止用于商业用途或从事违法行为!

css教程

CSS3背景图片固定滑动效果

css教程 我的站长站 2019-09-07 共96人阅读

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;
}
相关专题
css
css
2021-09-24 78

css是前端开发中的样式语言,学好CSS可以帮助开发出漂亮的模板,css专题为您整理本站所有css相关信息,包含css模板下载,css使用教程分享和css示例代码....

相关推荐
  • CSS3动画
  • CSS3教程
  • CSS选择器
  • React.js新拟态CSS3动画生成网站源码
    React.js新拟态CSS3动画生成网站源码

    源码介绍一款国外搬运的CSS3动画生成网站源码,基于React.js框架开发,中文叫新拟态,英文原名叫Neumorphism/Soft UI。是一款助于设计人员和开发人员对其进行试验并可能对其进行调整的源码。源码截图...

    html模板 51 1年前
  • @keyframes实现CSS动画帧效果

    本教程教大家如何使用@keyframes,制作一个类似幻灯片的CSS动画效果。首先我们准备一张连贯的动作图片,这里以这张熊跑路为例。新建一个DIV容器,放这里一帧图片<div></div>DIV的盒子属性div { position: absolute; width: 200px; ...

    css教程 71 2年前
  • 五彩loading动画效果html页面模板
    五彩loading动画效果html页面模板

    一款五彩的loading动画效果html页面模板,loading文字从右到左一顺弧形滚动,非常漂亮。<meta http-equiv="refresh" content="3;url=http://www.wdzzz.com">content为跳转延迟时间,url为跳转后的地址...

    html模板 154 4年前
  • 自适应动画轮播音乐培训织梦CMS网站模板
    自适应动画轮播音乐培训织梦CMS网站模板

    织梦CMS网站模板简介模板包含首页,音乐,课程,优势,视频,照片。在线报名,新闻资讯等页面,模板代码排序工整,兼容各大主流浏览器,利于后期网站SEO优化织梦CMS音乐培训模板截图...

    织梦cms模板 332 4年前
  • 超级酷炫的HTML动画效果引导页模板
    超级酷炫的HTML动画效果引导页模板

    超级酷炫的HTML动画效果引导页模板,各种3D视觉差动态效果非常666,而且带背景音乐播放器。还有酷炫的跳转翻页效果,用在个人网站上就是大神级人物。...

    html模板 556 3年前
  • CSS3实现苹果灵动岛效果

    主要利用了CSS3-animation + JS实现效果,只是提供思路,具体细节可以参考<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>灵动岛</title>...

    css教程 63 1年前
  • CSS3背景图片固定滑动效果

    CSS3背景图片固定住,滚动条滚动浮动在固定位置,这种效果网上看到很多。有一种视觉差的酷炫效果,一般大气的企业网站会非常常见,这种CSS效果运用的好会让网站非常大气上档次。今天我的站长站分享给大家,其实非常简单。background-attachment: fixed;CSS3的...

    css教程 96 4年前
  • CSS3做一个手机端左右滑动菜单

    手机端因为布局很窄,如果刚好菜单很多的情况下,我们就可以把菜单左侧左右滑动的效果,来节省空间,大致效果如下图具体效果可以参考今日头条,菜单可以左右滑动。有些花里胡哨的代码会用上JS,其实这种只需要CSS就能搞定,下面看代码。HTML代码<div><a href="htt...

    css教程 128 4年前
  • CSS3高光划过效果代码教程

    我们常常看到的高光划过效果,其实用CSS就能实现,CSS3高光划过效果代码教程方法CSS3高光划过效果代码.logo-wrapper { position: relative; font-size:2em; font-weight:700; line-height:39px; overflow:hidden; margin:0;}.logo-wr...

    css教程 102 4年前
  • css3背景渐变语法

    css3背景渐变语法background: linear-gradient(0deg, #fff 0%,#000 100%);语义说明background:背景linear-gradient:渐变0deg:渐变方向,比如从左到右,从右到左,从上到下等等#fff:渐变起始颜色#000:渐变结束颜色0%,100%:透明度...

    css教程 58 3年前
  • CSS如何选择第一个和倒数第一个元素

    前端新手会遇到不知道如何选择列表中的第一个和倒数第一个元素,其实这非常简单。以后所有关于CSS选择的问题,都可以直接搜索CSS选择器的手册,里面有所有的CSS选择解决方法。今天主要介绍CSS如何选择第一个和倒数第一个元素,这里就需要用到:first-child和...

    css教程 41 10个月前
  • CSS伪类选择符大全

    选择符版本简介E:linkCSS1设置超链接a在未被访问前的样式。E:visitedCSS1设置超链接a在其链接地址已被访问过时的样式。E:hoverCSS1/CSS2设置元素在其鼠标悬停时的样式。E:activeCSS1/CSS2设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样...

    css教程 33 1年前
  • 前端开发如何使用其他字体(图文)

    我们经常看到别人的网站字体非常漂亮,那是因为他们使用了其他的美化字体,合理的使用字体可以让网站看上去,高端优雅。那么如何使用自己下载的字体,我的站长站今天分享给大家整套方法。1、字体选择选择字体要注意两点,如果这两点不注意,会适得其反的。一、...

    css教程 56 1年前
  • CSS3修改浏览器滚动条样式

    首先我们写一个简单的小实例来说明下,设置一个长框为300的div,设置下溢出滚动。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=&q...

    css教程 46 2年前
  • 为什么bootstrap国内很少人使用

    前言Bootstrap业内知名度很高,在刚刚出来的时候是史无前例的,虽说不少公司在招聘岗位中也要求掌握Bootstrap等框架,但现实项目中应用Bootstrap的并不多。随着更多优秀的前端框架的出现,bootstrap对比后就会发现很多缺点,前端er们自然而然的就放弃了使用bo...

    css教程 758 2年前