css background-attachment: local
发布在yibuyisheng 的专栏2015年8月26日view:1821CSS
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

background-attachment: local 是有坑的!

首先,local 应该是什么效果呢?引用规范中的相应内容

The background is fixed with regard to the element’s contents: if the element has a scrolling mechanism, the background scrolls with the element’s contents, and the background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them. Because the scrollable area does not include the border area, for scrollable elements the ‘border-box’ value of ‘background-clip’ may be treated the same as ‘padding-box’.

其中有一种效果是:背景图片会随着滚动条的滚动而动。

作为 Chrome 浏览器的粉丝,当然是首先在 Chrome 下看效果了,但是很抱歉,背景图片并不会滚动,具体效果可点开文章开头的例子看一下。

但是观察到两个有趣的现象:

  • 1、在第三个框中,图片还未完全渲染出来的时候,在这个块上面快速地滚动鼠标滑轮,图片会动一动的,但是动得很混乱;
  • 2、给框中加入一列 input 元素,正如例子中的第四个框所示,在切换 input 焦点的时候,背景图片会随着滚动条的滚动而动的。

在最新版本的 IE 中和最新版本的 Firefox 中都没有这个问题,表现正常。

评论
发表评论
暂无评论
WRITTEN BY
PUBLISHED IN
yibuyisheng 的专栏

关于 web 技术的胡言乱语

我的收藏