关于背景图片background-attachment: fixed属性在Chrome浏览器中失效的问题解决。

最新推荐文章于 2024-03-11 19:43:05 发布

原创最新推荐文章于 2024-03-11 19:43:05 发布 · 3.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html

在使用window.print()进行文件打印时，遇到Chrome浏览器中background-attachment: fixed属性导致背景图片无法显示的问题。通过在CSS中添加body:before选择器并设置背景图片样式，成功解决了背景图片在Chrome打印时的固定和分页显示问题。

关于背景图片background-attachment: fixed;属性在谷歌浏览器中失效的问题解决。

最近在做文件打印的功能操作。我选择使用简单易用的window.print()来打印整个页面。具体操作网上有很多相关的方法，这里不再一一叙述。只在此说一下在打印背景图片时遇到的问题及解决方法。

首先，背景图片设置好之后我对其进行平铺和固定设置
如图所示。在这里插入图片描述
我的本意是将一个不大的图片平铺整个页面，并且打印时即使页面内容过多导致分页也能继续显示背景图片。但我使用谷歌浏览器时，出现问题。background-attachment: fixed;此属性导致我的整个背景图片无法显示，去掉此属性后背景图片显示，但是同时，内容过多导致的分页时，只有其中一张A4纸上存在背景图片，一时间束手无策。百度一番后，我根据网上各位大神的提示，先舍弃掉谷歌浏览器，使用IE访问项目。发现此属性在IE上生效并且无论分多少页，背景图片同时存在每一张页面中。我开始考虑background-attachment: fixed此属性的兼容问题。很感谢网上大神的分享。我很快就找到了此属性的兼容问题。并且搜索到了解决办法。如图所示：
在这里插入图片描述
在我添加的body之前，再增加一个body:before，将背景图片的相关内容放入到此CSS中去。background-attachment: fixed；即时生效。谷歌浏览器正常兼容此属性。打印背景图片完成。

注意事项：
1.本人并非专业的前端工程师，所有的东西都要考自己摸索，并依据之前学习的知识完成。所以有一些不正确或者不标准的地方，请多多包涵。
2.发现背景图片问题时，请先舍弃掉当前的浏览器，更换浏览器测试。如果都无效，则证明有可能不是浏览器的问题。
3，最后附上样式的代码：

body:before {
  content: ' ';
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(./images/123.png);
  background-size: cover;
}