background-attachment:local 在chrome中的渲染无效解决

最新推荐文章于 2024-01-03 07:45:00 发布
最新推荐文章于 2024-01-03 07:45:00 发布
阅读量991 收藏
点赞数
分类专栏： CSS 文章标签： background-attachement background-attachment local
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FrontEndExplorerZ/article/details/79435686
版权

最近在学习 < CSS 的秘密 >一书,遇到如下问题:

测试浏览器版本: Chrome 64.0.3282.186(64位)

在用户体验一章-滚动提示小节中,按照书中实例利用背景渐变实现滚动条顶部和底部阴影时,发现背景使用两层渐变的情况下设置为background-attachment:local的那层遮罩无法跟随元素自身滚动,但是safari 中渲染正常.

经过一番尝试,发现只有在元素自身设置了 border-radius 属性值的时候 chrome 渲染正常.

记录一下,如有相同问题可以参考


FrontEndExplorerZ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3固定背景background-attachment移动端兼容方案
夏尔的小酒馆
12-15 1223
问题背景 想做一个固定背景的移动端网站，结果发现「background-attachment」竟然不起作用，具体出现在iOS Safari浏览器上。 出现原因 查询stackoverflow得知出现问题的原因是background-attachment属性在移动端重绘的成本很高，并且滚动表现也不尽人意，所以在一些移动端是被禁止的。 解决方案 目前有一个成本较低的hack方案，但是效果对于追求完美者可能稍有缺憾。具体的代码是： body::before { content: ''
css中background-attachment的用法详解
最新发布
javaboyad2的博客
04-18 373
在这个例子中，即使你滚动页面，背景图像也会保持在视口的同一位置。这对于创建全屏背景或者当背景图像是设计元素的一部分，并且需要始终保持在视口中的某个位置时非常有用。这意味着背景图像会随着元素内容的滚动而滚动，而不是随着整个页面的滚动而滚动。背景图像相对于浏览器窗口固定，即使页面内容滚动，背景图像也保持在同一位置。这通常用于创建全屏背景效果，或者当背景图像需要始终保持在视口的某个位置时。这意味着当你向下滚动页面时，背景图像也会向上移动，从而保持其在视口中的相对位置不变。）一起使用，以创建复杂的背景效果。
background-attachment 没有效果
秋叶哈哈宋梦辉
07-24 674
background-attachment 没有效果 设置了背景图片,背景图片很大,也设置了 overflow:hidden 但是滚动框没有出现,背景图片也我无法拉动 解决 : 文本框里面没有文字,文本框没有被撑起来,故里面background-attachment 没有效果 ...
background-attachment属性进阶
weixin_34335458的博客
05-19 782
前提是定义了background-image属性，然后用background-attachment来指明背景图的位置是固定于视口的，还是随着包含块移动的。可简单理解为定义背景图片随滚动轴的移动方式。 取值： scroll:默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定。 fixed：背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了body上。 loc...
background-attachment
极客on之路
07-18 442
background-attachment 说明：设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性 语法：background-attachment： [ , ]* = fixed | local | scroll（默认值） 1）fixed：背景图像相对于窗体固定。演示页面 2）scroll：背景图像相对于元素固定，也就
background-attachment 属性详解
聚娃科技开发者博客
01-03 1220
通过本文对属性的详细解析，我们深入了解了这一CSS属性在网页设计中的应用场景和实际使用方法。提供了一种简便而有效的方式，通过调整背景图像的滚动方式，为网站增色添彩。希望这篇文章对大家更好地理解和运用属性有所帮助。
css background-attachment属性进阶
09-24
CSS中的`background-attachment`属性是用来控制背景图像随滚动条移动的方式。在深入理解这个属性之前，我们需要确保已经设置了`background-image`属性，因为它定义了背景图像。`background-attachment`接着决定背景...
chrome-tab-count:计算在Chrome中打开的标签页数量
05-11
在`background.js`中，可以使用`chrome.tabs` API来获取和监控标签页信息。例如，`chrome.tabs.onCreated`和`chrome.tabs.onRemoved`事件可以分别捕获新标签页的创建和删除，每次事件触发时更新计数。 此外，可能...
cordova-plugin-background-upload:用于背景上传的Cordova插件
03-31
支持平台的iOS 安卓安装要安装插件： cordova plugin add cordova-plugin-background-upload --save要卸载此插件： cordova plugin rm cordova-plugin-background-upload样本用法该插件需要在上传之前进行初始化。...
react-native-background-job：安排React Native中的后台作业，当您的应用处于后台状态时运行JavaScript
02-05
安排后台作业，这些后台作业在您的应用程序处于后台或什至在前台感到勇敢时运行您JavaScript。 即使该应用程序已关闭，作业仍将运行，并且默认情况下，该作业在重新启动后仍将保留。 这个库依赖于React Native的 ...
feedly-open-background-tab:Chrome扩展程序可在背景标签中打开当前选中的动态新闻项，以供以后查看
03-31
【标题】：“feedly-open-background-tab”是一款专为Chrome浏览器设计的扩展程序，其核心功能是将当前选中的动态新闻项在后台标签页中打开，以便用户能够在不影响当前浏览的情况下，将其保存下来稍后阅读。...
background-attachment属性值scroll、fixed和local的区别
木木木华的博客
02-01 1351
background-attachment属性值scroll、fixed和local的区别
background-attachment属性学习笔记
chen_1243624551的博客
07-07 466
第一次写学习笔记，如有错误请大家纠正，结合代码自己运行一遍看结果更易理解，因为我觉得自己描述的可能会不准确~ 网页页面包括可视区加滚动部分 background-attachment: scroll; 1.背景图片加在当前盒子所包围区域的可视区中 2.相对于网页页面固定：即不随当前盒子的滚动而滚动，只有页面滚动时才滚动 background-attachment: fixed; ...
“attachment； filename=“不生效问题解决
赢啦啦的博客
11-22 656
在文件下载时，明明在响应头里加了"“attachment； filename=“不生效问题解决
background-attachment: fixed的用法
梁同学与Android
11-12 5694
CSS background-attachment 属性 标签定义及使用说明 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。 默认值: scroll 继承: no 版本: CSS1 JavaScript 语法: object object.style.backgroundAttachment=“fixed” 属性值 scroll 背景图片随着页面的滚动而...
关于background-attachment: fixed 实现滚动视差的逻辑理解
lin_jiejie的博客
04-18 1212
使用 background-attachment: fixed 实现滚动视差 <section style="height: 300px;width:500px;background: url('http://pic7.photophoto.cn/20080407/0034034859692813_b.jpg') fixed no-repeat;">IMG1</section...
css background-attachment:fixed 固定背景、不随内容一起滚动
愿我如星君如月 ... 夜夜流光相皎洁 ...
01-17 2892
兼容性：全兼容，只不过IE滚动时会有一点不流畅。 background-attachment 有 3 个选项：scroll / fixed / inherit 。 锁定背景： background-attachment:fixed; 要有比较好的体验，建议让background-image:url(""),background-color:""一起使用。这样无图片时也能有很好的体验。...
background-attachment: fixed 在iphone设备失效的解决
06-08
在 iPhone 设备上，当使用 `background-attachment: fixed` 属性时，背景图像不会像在其他设备上一样固定，而是会随着页面滚动而滚动。这是因为 Safari 浏览器在 iOS 设备上禁用了此属性，以提高性能和减少内存占用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值