css background-attachment:fixed固定背景不随内容一起滚动

最新推荐文章于 2024-08-28 16:52:17 发布
最新推荐文章于 2024-08-28 16:52:17 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tangcc110/article/details/79976687
版权

兼容性：全兼容，只不过IE滚动时会有一点不流畅。

base knowledge:

background-attachment:scroll(default)/ fixed(div内容不随内容一起滚动)/inherit

brief summary:

        要有比较好的体验，建议让background-image:url(""),background-color:""一起使用。这样无图片时也能有很好的体验。

可以做出这种效果。：reference:                  https://www.mmcoins.org/cn/?from=singlemessage

tangchangcai.
关注
专栏目录
CSS背景使用方法
iheyu(一个新手小白女PHP初学者)
12-05 611
1.背景相关的属性——>所有标签都具有的CSS属性： 1.1.背景可以设置成某种颜色： body { background-color: red; } 1.2.背景可以设置成某张图片 body { background-image: url('123.jpg'); } 1.2.1~1.2.2. 背景是平铺的，只沿着x或y 轴平铺 body { ba...
background-attachment：fixed实现酷炫效果
dai_yanxia的博客
09-27 2850
最近发现一个css的背景图片的属性，可以实现一个很酷璇的效果，根据效果，我给它命名为王者换肤，下面我们来看一下它的实现方式。 css3参考手册 的背景与边框目录里面，有一个介绍background-attachment属性的，它的值有3个，分别是fixed,scroll,local,他们分别代表的意义如下： 首先测试一下scroll属性的效果,页面结构如下： <div class="wrap item1">
CSS background-attachment 背景图片固定效果
DevOps海洋的渔夫@专栏
02-05 694
仅供学习，转载请注明出处 background-attachment 设置背景图片是固定还是随着页面滚动条滚动 当给页面body设置背景图片，背景图片默认是随着滚动条下拉而滚动的。下面写一个示例看看，如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...
CSS-background属性【看这一篇就够了！！！】
最新发布
zheshiyangyang的博客
08-28 2781
padding区域是有背景颜色的。
fixed背景固定 做滚动视觉差
weixin_30551963的博客
10-09 210
background:url(qingz.jpg) center center no-repeat;background-attachment:fixed; 转载于:https://www.cnblogs.com/zhunandw/p/4862966.html
CSS笔记-background-attachment:fixed用法
印第安米饭
11-10 4483
个人理解：在当前盒子里，背景会相对盒子等距离反方向移动，造成一种盒子上下滚动，背景图原地不动的效果。 PS：只和当前设置了背景的盒子有关系，和其他所有元素都没关系 上图，除了背景图片，多设置一句即可 background-attachment:fixed PS：如果大家想自行测试，一个大盒子，设置上背景，下面写一堆字，就像此gif，设置大盒子的background-attachment:fixe...
手机端背景图固定fixed兼容方法
夕空
06-03 976
背景图background-attachment:fixed在移动端多为不支持，采用position: fixed;并JS来解决 .box{width: 100%;height: 100%;} .fixedbg{position: fixed;left: 0;top: 0;z-index: -1; width: 100%;height: 100%;} <div class="box"&...
关于背景图片background-attachment: fixed属性在Chrome浏览器中失效的问题解决。
好名字都被抢完了的博客
06-07 2919
关于背景图片background-attachment: fixed;属性在谷歌浏览器中失效的问题解决。 最近在做文件打印的功能操作。我选择使用简单易用的window.print()来打印整个页面。具体操作网上有很多相关的方法，这里不再一一叙述。只在此说一下在打印背景图片时遇到的问题及解决方法。 首先，背景图片设置好之后我对其进行平铺和固定设置 如图所示。 我的本意是将一个不大的图片平铺整个页面，并且打印时即使页面内容过多导致分页也能继续显示背景图片。但我使用谷歌浏览器时，出现问题。background-a
css3固定背景background-attachment移动端兼容方案
夏尔的小酒馆
12-15 1291
问题背景 想做一个固定背景的移动端网站，结果发现「background-attachment」竟然不起作用，具体出现在iOS Safari浏览器上。 出现原因 查询stackoverflow得知出现问题的原因是background-attachment属性在移动端重绘的成本很高，并且滚动表现也不尽人意，所以在一些移动端是被禁止的。 解决方案 目前有一个成本较低的hack方案，但是效果对于追求完美者可能稍有缺憾。具体的代码是： body::before { content: ''
css background-attachment属性进阶
09-24
CSS中的`background-attachment`属性是用来控制背景图像随滚动条移动的方式。在深入理解这个属性之前，我们需要确保已经设置了`background-image`属性，因为它定义了背景图像。`background-attachment`接着决定背景...
css 背景固定样式background-attachment属性基础
09-24
其中，“background-attachment”属性是CSS中控制背景图像如何随页面内容滚动的属性。该属性可以决定背景图片是随着页面内容一起滚动，还是固定在一个位置不动。 该属性主要有两个关键字值： 1. scroll：此值是...
背景固定的效果fixed
yzyblog的博客
06-27 1730
- background-attachment:fixed兼容写法：.active_main::before {  content: ' ';  position: fixed;  z-index: -1;  top: 0;  right: 0;  bottom: 0;  left: 0;  background: url(../img/qmsd_bg.jpg) no-repeat 0 top #...
关于 background-attachment 属性详解
m0_60744481的博客
05-10 6050
记录学习和工作过程中的css问题以及笔记
css 背景效果_css基础篇06--背景样式
weixin_39806948的博客
11-20 210
在CSS中，背景样式主要包括背景颜色和背景图像。在传统的布局中，只能使用少数的标签来定义背景图像和背景颜色。但是随着Web2.0时代的到来，设置背景样式不再使用传统HTML属性来定义，转而使用无限制、更灵活的CSS来定义。目标设置背景颜色设置背景图片操作背景图片样式背景颜色-background-color在CSS中，使用background-color属性来定义元素的背景颜色。语法：backgr...
css grid随页面大小_CSS 知识总结
weixin_39916549的博客
11-21 145
近来学习了CSS全解，主要可以分为几部分：CSS基础概念、CSS布局、CSS定位和CSS动画，接下来我会按照这几部分逐一进行总结。一、CSS基础概念1、CSS可以给HTML加样式，使其变得好看。它的名称叫做层叠样式表。层叠，指的是样式层叠、选择器层叠、文件层叠。样式层叠：可以多次对同一选择器进行样式声明。选择器层叠：可以用不同选择器对同一元素进行样式声明。文件层叠：可以用多个文件进行层叠。因为这些...
CSS如何设置高度为屏幕高度_不可思议的纯 CSS 滚动进度条效果
weixin_39953673的博客
11-21 187
问题先行，如何使用 CSS 实现下述滚动条效果？就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦啊。所以我一直在想，有没有可能只使用 CSS...
收集CSS琐碎的知识点
weixin_42247274的博客
10-29 225
1.
background-attachment:fixed实现背景固定的效果
泡泡的博客
07-07 5483
取值为fixed的时候，意思是固定背景，不管这个元素在什么地方，它的背景的位置就与它本身无关了，始终是参照浏览器的可见视窗来定位的
ios background-attachment:fixed
06-03
在 iOS 中，background-attachment: fixed 的效果会被禁用，因为它会影响到页面的滚动性能。在 iOS 中，背景图像会随着页面的滚动而滚动，而不是像 fixed 效果一样固定在页面的某个位置。 如果你希望在 iOS 中实现...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值